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的动态添加控件并取值的实现代码
Sep 24 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
jquery zTree异步加载简单实例分享
Feb 05 Javascript
jquery和js实现对div的隐藏和显示方法
Sep 26 Javascript
js控制网页前进和后退的方法
Jun 08 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
Aug 01 Javascript
layer.confirm取消按钮绑定事件的方法
Aug 17 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 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
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
php设计模式之适配器模式原理、用法及注意事项详解
2019/09/24 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
ext jquery 简单比较
2010/04/07 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
Javascript继承机制详解
2017/05/30 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
使用Vue.js中的过滤器实现幂方求值的方法
2019/08/27 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
微信小程序实现滚动Tab选项卡
2020/11/16 Javascript
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
Python登录并获取CSDN博客所有文章列表代码实例
2017/12/28 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
Django中反向生成models.py的实例讲解
2018/05/30 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
用python实现一个简单的验证码
2020/12/09 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
护士自荐信范文
2013/12/15 职场文书
优秀村官事迹材料
2014/01/10 职场文书
怎么写自荐书范文
2014/02/12 职场文书
会议主持词
2014/03/17 职场文书
2019公司管理制度
2019/04/19 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
vue3种table表格选项个数的控制方法
2022/04/14 Vue.js