Jquery Ajax each for eq find

                                           Jquery Ajax以及周边方法的回顾
1.定义:ajax()方法通过HTTP请求加载远程数据,该方法是JQuery底层AJAX实现.简单易用的高层实现见$.get,$.post等。$.ajax()返回其创建的XMLHttpRequest对象.最简单的情况下,$.ajax()可以不带任何参数直接使用.
2.语法:JQuery.ajax([settings])
3.常见的常规参数:
  <1>:url String类型,默认值:当前页地址,发送请求的地址.
  <2>:type String类型,默认值:"GET".请求方式("POST"或"GET"),默认为"GET".注意:其它HTTP请求方法，如PUT和DELETE也可以使用,但仅部分浏览器支持.
  <3>:data String类型,发送到服务器的数据.将自动转换为请求字符串格式.GET请求中将附加在URL后.查看processData选项说明以禁止自动转换.必须为key/value格式.如果为数组,JQuery将自动为不同值对应同一个名称.如{foo:["bar1","bar2"]}转换为"&foo=bar1&foo=bar2".
  <4>:dataType String类型,预期服务器返回的数据类型.如果不指定,JQuery将自动根据HTTP包MIME信息来智能判断,比如XML MIME类型就被识别为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>:Context Object类型,这个对象用于设置Ajax相关回调函数的上下文.也就是说,让回调函数this指向这个对象(如果不设定这个参数,那么this就指向调用本次AJAX请求时传递的options参数).比如指定一个DOM元素作为Context参数,这样就设置了SUCCESS回调函数的上下文为这个DOM元素
   <6>:async Boolean类型 默认值为true,默认设置下,所有的请求为异步请求.如果需要发送同步请求,请将此选项设置为false.
   注意:同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行
   <7>:success function类型,请求成功后的回调函数,参数:由服务器返回,并根据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){
var aside = $('aside');
                aside.removeClass('dsn');
                var len = data.length;
                $.each(data,function(index,item){
                    var html = "<li class='dsn_of'>"+
                    "<span class='aside_span_f' onClick = 'seach(this);'></span>"+
                    "<span class='aside_span_1'>"+item.chineseName+"</span>"+
                    "<span class='aside_span_2'>"+item.mobile+"</span>"+
                    "<span class='aside_span_3'>"+item.departmentInfo.depName+"</span>"+
                    "<span class='aside_span_4'>"+item.chineseName+"</span>"+
                    "<span class='aside_span_5' style='display:none'>"+item.userId+"</span>"+
                    "<span class='aside_span_l'>"+
                        "<div class='aside_i'>"+
                            "<div class='a_head'></div>"+
                            "<div class='b_head'><p>"+item.chineseName+"</p></div>"+
                            "<div class='c_head'><p><strong>部门：</strong></p>"+
                                "<p>"+item.departmentInfo.depName+"</p></div>"+
                            "<div class='c_head'><p><strong>工号：</strong></p>"+
                                "<p>704928</p></div>"+
                            "<div class='c_head'><p><strong>成本中心：</strong></p>"+
                                "<p>TMC总部</p></div>"+
                            "<div class='c_head'><p><strong>职位：</strong></p>"+
                                "<p>IOS开发工程师</p></div>"+
                            "<div class='c_head'><p><strong>手机：</strong></p>"+
                                "<p>"+item.mobile+"</p></div>"+
                            "<div class='c_head'><p><strong>邮箱：</strong></p>"+
                                "<p>"+item.email+"</p></div>"+
                        "</div>"+
                   " </span>"+
                  "</li>";
$('#aaa').append(html);
});
    }});

评论

1 楼 无它唯勤 2016-07-19  

JQuery跨域问题,欢迎大家各抒己见,踊跃讨论