jQuery Ajax异步
jQuery.form.js插件(博客参考):
http://blog.csdn.net/zzq58157383/article/details/7718956
http://www.cnblogs.com/heyuquan/p/form-plug-async-submit.html
ajax分页:http://www.helloweba.com/view-blog-195.html
http://www.cnblogs.com/chenping-987123/archive/2011/02/14/1954640.html
ajaxUpload插件实现单图上传:http://www.cnblogs.com/abel/archive/2013/07/24/3213409.html
善于使用jquery的data()方法来缓存后台传来的交互数据:http://www.css119.com/book/jQuery/
优势:
1、简简单单几句代码,我们就可以实现表单的提交,并且可灵活通过ajaxSubmit()函数基于任何事件的触发实现表单异步提交。
2、支持文件上传功能,并在新浏览器中支持进度条更新。
3、与jQuery库完美结合,支持jQuery.ajax()函数触发的各种事件,支持jQuery.ajax()中所传递的参数。
2、支持文件上传功能,并在新浏览器中支持进度条更新。
3、与jQuery库完美结合,支持jQuery.ajax()函数触发的各种事件,支持jQuery.ajax()中所传递的参数。
实例:
<script type="text/javascript">
$(function () {
var options = {
type : "post",
dataType : "json",
beforeSubmit : checkout, //表单提交之前的验证函数
success: function (data) {
$("#responseText").text(data);
}
};
// 方法一:ajaxForm
$("#form").ajaxForm(options);
// 方法二:ajaxSubmit
$("#btnSubmit").click(function () { //button或input不能为submit类型
$("#form").ajaxSubmit(options);
});
});
</script>
4.封装jquery Ajax函数:
var Ajax = function(url, type success, error) { $.ajax({ url: url, type: type, dataType: 'json', timeout: 10000, success: function(d) { var data = d.data; success && success(data); }, error: function(e) { error && error(e); } }); }; // 使用方法: Ajax('/data.json', 'get', function(data) { console.log(data); });
在jquery的ajax函数中,可以传入3种类型的数据:
1.文本:"uname=alice&mobileIpt=110&birthday=1983-05-12";
2.json对象:{uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'};
3.json数组:
[
{"name":"uname","value":"alice"},
{"name":"mobileIpt","value":"110"},
{"name":"birthday","value":"2012-11-11"}
];
所以,我们可以一键获取表单并提交,非常方便。
补充:
其实提取表单数据的话只需要serialize()方法直接获取"uname=alice&mobileIpt=110&birthday=1983-05-12"这样的就可以了。
对于跨域使用jsonp,其原理为:
首先在客户端注册一个callback, 然后把callback的名字传给服务器。
此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.
最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)
JavaScript常见跨域思路代码:http://caibaojian.com/javascript-crossdomain.html
利用cors实现跨域请求:http://newhtml.net/using-cors/ http://www.ruanyifeng.com/blog/2016/04/cors.html