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基础学习资料
Nov 23 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
超全面的javascript中变量命名规则
Feb 09 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
vue 动态修改a标签的样式的方法
Jan 18 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
Mar 02 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
详解vue中使用protobuf踩坑记
May 07 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
附件名前加网站名
2008/03/23 PHP
解析php时间戳与日期的转换
2013/06/06 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
几个优化WordPress中JavaScript加载体验的插件介绍
2015/12/17 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
node全局变量__dirname与__filename的区别
2019/01/14 Javascript
javascript History对象原理解析
2020/02/17 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
[01:00]选手抵达华西村 整装待发备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
python3.5仿微软计算器程序
2020/03/30 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
python画图的函数用法以及技巧
2019/06/28 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
PyTorch中的Variable变量详解
2020/01/07 Python
Python 中@property的用法详解
2020/01/15 Python
Python如何用filter函数筛选数据
2020/03/05 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
中学生团员自我评价分享
2013/12/07 职场文书
电子商务专业毕业生自荐书
2014/06/22 职场文书
员工升职自荐信
2015/03/27 职场文书
刑事附带民事诉讼答辩状
2015/05/22 职场文书
重温入党誓词主持词
2015/06/29 职场文书
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js