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 相关文章推荐
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
javascript 面向对象的JavaScript类
May 04 Javascript
JS中的substring和substr函数的区别说明
May 07 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
基于JS实现简单的样式切换效果代码
Sep 04 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
JS获取input file绝对路径的方法(推荐)
Aug 02 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
详解vue 组件
Jun 11 Javascript
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
西德产收音机
2021/03/01 无线电
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
PHP上传文件及图片到七牛的方法
2018/07/25 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
JS中静态页面实现微信分享功能
2017/02/06 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
vue弹窗组件使用方法
2018/04/28 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
利用python代码写的12306订票代码
2015/12/20 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
python实现生成字符串大小写字母和数字的各种组合
2019/01/01 Python
Python编程中类与类的关系详解
2019/08/08 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
大专计算机个人求职的自我评价
2013/10/21 职场文书
测试工程师程序员求职信范文
2014/02/20 职场文书
个人安全生产责任书
2014/07/28 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
运动会广播稿200字
2014/10/18 职场文书
承德避暑山庄导游词
2015/02/03 职场文书
课外活动总结
2015/02/04 职场文书
业务员年终工作总结2015
2015/05/28 职场文书
详解JAVA中的OPTIONAL
2021/06/14 Java/Android
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL