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 相关文章推荐
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
js验证整数加保留小数点的简单实例
Dec 02 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
详解JavaScript表单验证(E-mail 验证)
Mar 31 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
Sep 11 Javascript
用Node写一条配置环境的指令
Nov 14 Javascript
js 闭包深入理解与实例分析
Mar 19 Javascript
vue操作dom元素的3种方法示例
Sep 20 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 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
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
PHP创建XML接口示例
2019/07/04 PHP
PHP底层运行机制与工作原理详解
2020/07/31 PHP
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
Python 匹配任意字符(包括换行符)的正则表达式写法
2009/10/29 Python
Python学习笔记之常用函数及说明
2014/05/23 Python
详解python发送各类邮件的主要方法
2016/12/22 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
Django安装配置mysql的方法步骤
2018/10/15 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
Django缓存系统实现过程解析
2019/08/02 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
python中的线程threading.Thread()使用详解
2019/12/17 Python
python绘图模块之利用turtle画图
2021/02/12 Python
请问软件开发中的设计模式你会使用哪些
2015/05/13 面试题
财务管理专业推荐信
2013/11/19 职场文书
大学生求职推荐信
2013/11/27 职场文书
暑期社会实践方案
2014/02/05 职场文书
教师读书活动总结
2014/05/07 职场文书
代领毕业证委托书
2014/08/02 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
高二学年自我鉴定范文(2篇)
2014/09/26 职场文书
写给老婆的保证书
2015/02/27 职场文书
暑期家教宣传单
2015/07/14 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP