jquery 框架使用教程 AJAX篇


Posted in Javascript onOctober 11, 2009

小试了下AJAX,感觉比prototype简洁多了,在JQuery中,AJAX有三种实现方式:$.ajax(),$.post,$.get()。
XHTML(主要):
<div id="result" style="background:orange;border:1px solid red;width:300px;height:400px;"></div>
<form id="formtest" action="" method="post">
<p><span>输入姓名:</span><input type="text" name="username" id="input1" /></p>
<p><span>输入年龄:</span><input type="text" name="age" id="input2" /></p>
<p><span>输入性别:</span><input type="text" name="sex" id="input3" /></p>
<p><span>输入工作:</span><input type="text" name="job" id="input4" /></p>
</form>
<button id="send_ajax">提交</button>
<button id="test_post">POST提交</button>
<button id="test_get">GET提交</button>
JS:
1、引入jquery框架:
<script type="text/javascript" src="../js/jquery.js"></script>
2、构建AJAX,JQUERY的好处是不需要在XHTML中使用JS代码来触发事件了,可以直接封装在JS文件中:
<script type="text/javascript">
//$.ajax()方式
$(document).ready(function (){
$('#send_ajax').click(function (){ //直接把onclick事件写在了JS中,而不需要混在XHTML中了
var params=$('input').serialize(); //序列化表单的值,与prototype中的form.serialize()相同
$.ajax({
url :'ajax_test.php', //后台处理程序
type:'post', //数据发送方式
dataType:'json', //接受数据格式
data:params, //要传递的数据
success:update_page //回传函数(这里是函数名)
});
});
});
function update_page (json) { //回传函数实体,参数为XMLhttpRequest.responseText
var str="姓名:"+json.username+"<br />";
str+="年龄:"+json.age+"<br />";
str+="性别:"+json.sex+"<br />";
str+="工作:"+json.job;
$("#result").html(str);
}
//$.post()方式:
$(function (){ //$(document).ready(function (){ 的简写
$('#test_post').click(function (){
$.post('ajax_test.php',
{username:$('#input1').val(),age:$('#input2').val(),sex:$('#input3').val(),job:$('#input4').val()},
function (data){ //回传函数
var myjson='';
eval('myjson='+data+';');
$('#result').html("姓名:"+myjson.username+"<br />工作:"+myjson['job']);
});
});
});
//$.get()方式:
$(function (){
$('#test_get').click(function (){
$.get('ajax_test.php',
{username:$("#input1").val(),age:$("#input2").val(),sex:$("#input3").val(),job:$("#input4").val()},
function (data) {
var myjson='';
eval("myjson="+data+";");
$("#result").html(myjson.job);
});
});
});
</script>
PHP代码:
<?php
$arr=$_POST; //若以$.get()方式发送数据,则要改成$_GET.或者干脆:$_REQUEST
$myjson=json_encode($arr);
echo $myjson;
?>

Javascript 相关文章推荐
教你如何解密js/vbs/vbscript加密的编码异处理小结
Jun 25 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
jQuery中after()方法用法实例
Dec 25 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
JavaScript实现鼠标滑过图片变换效果的方法
Apr 16 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
May 18 Javascript
angularJs-$http实现百度搜索时的动态下拉框示例
Feb 27 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
vue3.0中使用element的完整步骤
Mar 04 Vue.js
jQuery live( type, fn ) 委派事件实现
Oct 11 #Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 #Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 #Javascript
js css样式操作代码(批量操作)
Oct 09 #Javascript
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 #Javascript
JavaScript delete 属性的使用
Oct 08 #Javascript
有效的捕获JavaScript焦点的方法小结
Oct 08 #Javascript
You might like
PHP的宝库目录--PEAR
2006/10/09 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
JS Timing
2007/04/21 Javascript
js 控制下拉菜单刷新的方法
2013/03/03 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
基于Vue CSR的微前端实现方案实践
2020/05/27 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
2020/11/06 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
python+flask实现API的方法
2018/11/21 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
Python3+RIDE+RobotFramework自动化测试框架搭建过程详解
2020/09/23 Python
玩具反斗城天猫官方旗舰店:享誉全球的玩具店
2017/10/10 全球购物
给交警的表扬信
2014/01/12 职场文书
2014新生大学四年计划书
2014/09/21 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
普宁寺导游词
2015/02/04 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
《开国大典》教学反思
2016/02/16 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python