Jquery Ajax each for eq find

PHP淮北PHP00网 2016-07-19

JqueryAjax以及周边方法的回顾

1.定义:ajax()方法通过HTTP请求加载远程数据,该方法是JQuery底层AJAX实现.简单易用的高层实现见$.get,$.post等。$.ajax()返回其创建的XMLHttpRequest对象.最简单的情况下,$.ajax()可以不带任何参数直接使用.

2.语法:JQuery.ajax([settings])

3.常见的常规参数:

<1>:urlString类型,默认值:当前页地址,发送请求的地址.

<2>:typeString类型,默认值:"GET".请求方式("POST"或"GET"),默认为"GET".注意:其它HTTP请求方法,如PUT和DELETE也可以使用,但仅部分浏览器支持.

<3>:dataString类型,发送到服务器的数据.将自动转换为请求字符串格式.GET请求中将附加在URL后.查看processData选项说明以禁止自动转换.必须为key/value格式.如果为数组,JQuery将自动为不同值对应同一个名称.如{foo:["bar1","bar2"]}转换为"&foo=bar1&foo=bar2".

<4>:dataTypeString类型,预期服务器返回的数据类型.如果不指定,JQuery将自动根据HTTP包MIME信息来智能判断,比如XMLMIME类型就被识别为XML.在1.4中,JSON就会生成一个JavaScript对象,而script则会执行这个脚本.随后服务器端返回的数据会根据这个值解析后,传递回调函数.可用值:

"xml":返回xml文档,可用JQuery处理

"html":返回纯文本HTML信息,包含的Script标签会插入dom时执行

"script":返回纯文本JavaScript代码,不会自动缓存结果.除非设置了"cache"参数.注意:在远程请求时(不在同一个域下),所有POST请求都转为GET请求.(因为将使用DOM的Script标签来加载)

"json":返回json数据

"jsonp":jsonp格式.使用jsonp形式调用函数时,如"myurl?callback=?"JQuery将自动替换?为正确的函数名,以执行回调函数.

"text":返回纯文本字符串

<5>:ContextObject类型,这个对象用于设置Ajax相关回调函数的上下文.也就是说,让回调函数this指向这个对象(如果不设定这个参数,那么this就指向调用本次AJAX请求时传递的options参数).比如指定一个DOM元素作为Context参数,这样就设置了SUCCESS回调函数的上下文为这个DOM元素

<6>:asyncBoolean类型默认值为true,默认设置下,所有的请求为异步请求.如果需要发送同步请求,请将此选项设置为false.

注意:同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行

<7>:successfunction类型,请求成功后的回调函数,参数:由服务器返回,并根据dataType参数进行处理后的数据,描述状态的字符串.

周边可能用到的方法:

JQuery遍历-each()方法

定义:each()方法规定为每个匹配元素规定运行的函数

提示:返回false可用于及早停止循环

语法:$(selector).each(function(index,element))

index:选择器的index位置

element:当前的元素(也可使用"this"选择器)

eq(index|-index)

获取第N个元素

index一个整数,指示元素基于0的位置,这个位置是从0算起

-index一个整数,指示元素的位置,从集合中的最后一个元素开始倒数(1算起)

案例:

$.ajax({

url:"${ctx}/trainA/select",

type:'post',

data:{chineseName:chineseName},

dataType:'json',

context:document.body,

success:function(data){

varaside=$('aside');

aside.removeClass('dsn');

varlen=data.length;

$.each(data,function(index,item){

varhtml="<liclass='dsn_of'>"+

"<spanclass='aside_span_f'onClick='seach(this);'></span>"+

"<spanclass='aside_span_1'>"+item.chineseName+"</span>"+

"<spanclass='aside_span_2'>"+item.mobile+"</span>"+

"<spanclass='aside_span_3'>"+item.departmentInfo.depName+"</span>"+

"<spanclass='aside_span_4'>"+item.chineseName+"</span>"+

"<spanclass='aside_span_5'style='display:none'>"+item.userId+"</span>"+

"<spanclass='aside_span_l'>"+

"<divclass='aside_i'>"+

"<divclass='a_head'></div>"+

"<divclass='b_head'><p>"+item.chineseName+"</p></div>"+

"<divclass='c_head'><p><strong>部门:</strong></p>"+

"<p>"+item.departmentInfo.depName+"</p></div>"+

"<divclass='c_head'><p><strong>工号:</strong></p>"+

"<p>704928</p></div>"+

"<divclass='c_head'><p><strong>成本中心:</strong></p>"+

"<p>TMC总部</p></div>"+

"<divclass='c_head'><p><strong>职位:</strong></p>"+

"<p>IOS开发工程师</p></div>"+

"<divclass='c_head'><p><strong>手机:</strong></p>"+

"<p>"+item.mobile+"</p></div>"+

"<divclass='c_head'><p><strong>邮箱:</strong></p>"+

"<p>"+item.email+"</p></div>"+

"</div>"+

"</span>"+

"</li>";

$('#aaa').append(html);

});

}});

相关推荐

mmywcoco / 0评论 2020-06-06