上周写了一些代码,涉及到jquery异步请求,这里归纳总结下,希望对刚接触编程的同学有帮助。
主要习惯使用 art.dialog 框架,非常好用,在异步请求上,它提供了很多简便的方法。
加载使用art.dialog前,需要在页面代码上引入
<link href="/js/artDialog/css/blue.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" charset="utf-8" src="/js/artDialog/artDialog.js?skin=default"></script>
在jquery1.9.1版本或以上,不支持live()事件,用
$(document).on("click","td #id",function(){ })
替代live事件,响应动态显示的标签。
获得需要的数据:
ajax异步请求前,需要获取参数的值。主要有两种方式可以获得页面传过来的值。
不管是响应button <a> 还是其他,需要在相应标签内添加传来的参数值,如:
<a id="ajaxQuery" name="xxx" age="18" >ajaxquery</a>
它的响应事件获得参数方法:
$(document).on("click", "#ajaxQuery" , function(){ var name = $(this).attr('name'); var age = $(this).attr('age'); //这两种方式是通过获取属性值实现 var value = $(this).val(); //通过获取该标签的value值来实现 })
由于ajax请求一般是异步请求,所以在执行.get类的方法后,这类方法的数据是无法再传给后面的函数调用。
弹框显示:
一般调用art.dialog的基本步骤:
art.dialog(){ lock: true, //屏锁 background:'#333333', //背景色 opacity: 0.6, //透明度 title: '标题', id: '', content: '' //弹框html脚本。 ok:function() { } }
在ok : function() {}中写ajax请求脚本,
$.getJSON('url',function( data ) { //url为请求的url,可直接在url后面接参数和值,传参过去 });
或者
$.getJSON( 'URL' ,data,function(data) { })
data为传递参数。
请求完成后,依据返回来的参数判断是否响应成功,若成功,可返回指定页面
if ( data.code = 'true' ) { window.location.href = 'url'; }
基本上使用art.dialog整个流程到这里就结束了,接下来,具体谈下这几种ajax请求,和多选项时提交的情况。
多项选,selected情况的多选项情况:
var valueArr = []; $("#id option:selected").each(function(){ var value = $(this).val(); valueArr.push( value ); }
checked多选项时情况:
var valueArr = []; $("#id td .checked").each( function() { var value = $(this).val(); valueArr.push( value ); }
ajax请求方法:
$.post("url",{'data':valueArr,'data2': value} ,function( data ) { },json);
应对form表单的提交,这里有一个更优的方法:
var FormValue = $("#FormId").serialize(); $.get ( "url",FormValue,function(data){ data = eval("(" + data + ")"); //json decode if(data.code === 1001 ) { window.location.href = '/url'; } else { return false; } });
其他ajax当然还有 $.ajax $.getAjax等,也可以直接 用jquery 的submit事件实现表单提交。