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 相关文章推荐
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 Javascript
Bootstrap对话框使用实例讲解
Sep 24 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
使用Karma做vue组件单元测试的实现
Jan 16 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
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
javascript setinterval 的正确语法如何书写
2014/06/17 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
详解redis在nodejs中的应用
2018/05/02 NodeJs
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
js实现同一个页面,多个enter事件绑定的示例
2018/10/10 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
javascript实现倒计时效果
2020/02/17 Javascript
浅析TypeScript 命名空间
2020/03/19 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
深入Python解释器理解Python中的字节码
2015/04/01 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
Python使用re模块正则提取字符串中括号内的内容示例
2018/06/01 Python
python爬取哈尔滨天气信息
2018/07/14 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
python或C++读取指定文件夹下的所有图片
2019/08/31 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
pygame用blit()实现动画效果的示例代码
2020/05/28 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
python 通过 pybind11 使用Eigen加速代码的步骤
2020/12/07 Python
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
The North Face北面美国官网:美国著名户外品牌
2018/09/15 全球购物
.NET概念性的面试题
2012/02/29 面试题
介绍一下Linux内核的排队自旋锁
2014/01/04 面试题
宿舍保安职务说明书
2014/02/25 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
2014年教师个人工作总结
2014/11/10 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书