jquery02

jQuery ajax - ajax() 方法
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML)
通过在后台与服务器进行少量数据交换,
Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。



jQuery的ajax的实现,底层是通过XmlHttpRequest来完成异步交互的。jQuery中用于完成ajax请求的方法共有6个,这6个方法分为三层:
  最底层的是 $.ajax()方法,该方法内部调用了XmlHttpRequest来完成异步交互。
  中间层的方法有 $.get() 、$.post() 、load()方法,他们的实现,是调用了 $.ajax()方法。
  最高层的是 $.getJSON() 与 $.getScript()方法 ,他们的内部调用了中间层的方法。
详细:
1.jQuery.ajax(opotions)
  该方法是jQuery底层 AJAX 实现, $.ajax() 返回其创建的 XmlHttpRequest对象。大多数情况下不用直接操作该函数的,除非需要操作不常用的选项,以获得更多的灵活性。
  $.ajax()它的参数为一个可选的对象。该对象具有较多的属性,常用的参数介绍如下:(所有的参数都是可选的)
    type: 请求的提交的方式。默认的是 "GET"。
    url(String): 请求的目标地址。
    dataType: 服务器返回值的类型。常用的值有:
    "xml" :返回XML文档,可用jQuery处理
    "html":返回纯文本html信息,所包含的<script/>标签会在插入dom时执行
    "script":返回纯文本javaScript代码
    "json":返回json格式
    async(boolean):默认设置下,所有请求为异步请求,如果需要发送同步请求,请将此选项设置为false.  注意:同步请求将锁住浏览器,用户其他操作必须等待其请求完成才可以执行

              ........... 等等..


注意.ajax有一个特点:
当后台程序代码出现错误的时候,可以帮助我们进行响应。



2.load(url,data,callback) (很少使用)
$(selector).load(URL,data,callback);
  load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
  默认使用了get方式提交-但是传参数的时候转换成了post
  特点:专门加载远程的html代码
参数:
  url(String): 待装入html网页网址
  data(map): (可选)待发送key/value参数
  callback(function): (可选) 载入成功时回调函数

3.jQuery.get(url,data,callback,type)
jQuery.get(url,[data],[callback],[type])
  这是一个简单的get请求功能以取代复杂的 $.ajax,请求成功时可调用回调函数,如果需要在出错时执行函数,请使用 $.ajax
参数:
  url(String): 发送请求地址
  data(map): (可选)待发送key/value参数
  callback(function): (可选) 载入成功时回调函数
  type(String): (可选)返回内容格式,xml,html,script,json,text,_default
注意:get请求提交会乱码
get方法可以替代.ajax()和.getJSON()和.getScript()


4.jQuery.post(url,data,callback,type)
  jQuery.post(url,[data],[callback],[type])
  这是一个简单的post请求功能以取代复杂的 $.ajax,请求成功时可调用回调函数,如果需要在出错时执行函数,请使用 $.ajax
参数:
  url(String): 发送请求地址
  data(map): (可选)待发送key/value参数
  callback(function): (可选) 载入成功时回调函数
  type(String): (可选)返回内容格式,xml,html,script,json,text,_default


注意:post方法和get方法提交有什么区别呢?
  post可以传递中文,post隐式提交,在地址栏不显示请求的参数信息
  get中文会乱码,get显式提交,在地址上显示了请求的参数信息。
  因此表单中有中文的话,就用post提交,这样安全些
  post请求会比get要慢一些,因为底层有一个数据封装的步骤,把表单里的数据封装到一个对象里面传到后台,后台自动去解析。
  get请求传递的参数的数据量,比post小很多。。。。
  get只有几k,几百k,post有几兆,几百兆
  因此表单上传文件必须用post比较好

总结:post 传中文 安全(隐式) 传递的数据量大 慢 (推荐使用!)
get 中文乱码 不安全 传递的数据量小 快


5.jQuery.getJSON(url,data,callback)
jQuery.getJSON(url,[data],[callback])
  以get方式提交一个请求,返回的必须是一个json
参数:
  url(String): 发送请求的地址
  data(map): (可选)待发送key/value参数 --这个参数就是要你在后台接收的哟
  callback(function): (可选) 载入成功时回调函数


6.jQuery.getScript(url,callback)
  jQuery.getScript(url,[callback])
  以get方式提交一个请求,返回的必须是一个script
参数:
  url(String): 待载入js文件地址
  callback(function): (可选) 载入成功时回调函数



重点学习 .ajax方法 和 .post方法
ajax一个参数
post四个参数
先学习.ajax方法
  $.ajax({ 各式各样的属性 }) // $.ajax({})

常用的参数:
$.ajax({
  1. url:'jsp/接口/servlet'
  2. type:'post/get,
  3. dataType:'json/script/xml'
  4. function(data,type){
    //对ajax返回的原始数据进行预处理
    return data //返回处理后的数据
             }
  5. success:function(){}:请求成功后的回调函数。参数:由服务器返回,并根据dataType参数进行处理后的数据
  6. error:function(){} :请求失败的回调函数。
  7.function(data,textStatus){
    //data 可能是xmlDoc,jsonObj,html,text等等...
    this; //调用本次ajax请求是传递的options参数
           }
});


eg:保存数据到服务器,成功时显示信息
$.ajax({
  type:'post',
  url:'xxxxxx',
  data:'agentId=' + agentId, //data要发送到后台的数据
  success:function(msg){
    alert("DATA Saved:"+msg);
      }
});


完整列子:.$ajax 验证账号是否是正确的
//前台
<head>
<script type="text/javascript" src="js/jquery.sj"></script>
</script type="text/java">
  $(function(){
    $("#loginName").bind("blur",function(){    //先得到输入框的对象,做一个失去焦点的事件
    var v_loginName=$(this).val()
    $.ajax({
      type:'post',
      url:'checkName',
      // data:'loginName='+$(this).val(),          //向后台传入参数, $(this).val得到当前对象账号的值
      data:'loginName='+v_loginName,           //或者是在前面定义一个变量
      dataType:'json',
      success:function(data){ //当响应一切正常时执行success的回调方法
        //alert(data)
        if(!data){
            $("#message").text("对不起,这个账号已经使用请更换。")
            $("#message").attr("color","red")
        }else{
            $("#message").text("恭喜你这个账号可以使用")
            $("#message").attr("color","green")
    }
  },     //这里的逗号说明success的结束
        error:function(){        //当程序出现错误后执行error的回调方法
             //alert("错误,请稍后再试")
                    $("#message").text("错误啦,请稍后再试!") 
        }
      })
    })
})
</script>
</head>
<body>
        账号 <input type="text" name="loginName" id="loginName">
</body>

//后台
  1.写一个checkName方法 url:'checkName',
  2.后台接收这个参数loginName data:'loginName='+v_loginName
  3.一些处理
  4.返回 success:function(data){ 前台接收


重点学习 .ajax方法 和 .post方法
学习.post方法

  .post一共有四个参数
  jQuery.post(url,[data],[callback],[type])
        url, 参数,回调方法, 类型

eg:
  $.post('<@spring.url "/agent/getSubPackageList" />', //第一个参数url
      {agentId : row.agentId,}, //第二个参数data
      function(dat) { //第三个参数 回调函数
        if (dat.succ) {
          $('#subPackageIds').prev('span').hide();
          $('#subPackageIds').next('.textbox').show();

        $('#subPackageIds').combobox({
            url : '<@spring.url "/agent/getSubPackage" />?packageId='+data.packageId,
            value : dat.entity
         });
        } else
            $.messager.alert('错误', data.errorObj.message, 'error');
        },
        'json');   //第四个参数 type


jQuery.each-----数组与对象的访问
jQuery.each(obj,callback)

通用遍历方法,可用于遍历对象和数组
不同于jquery 对象的$().each()方法,此方法可以用于任何对象。
回调函数拥有2个参数:.each(obj,callback)
            第一个为对象的成员或者是数组的索引,第二个为对应变量或内容

如果需要退出each循环,可以使用回调函数返回false,其他的返回值将被忽略。


eg:遍历数组,同时使用元素索引和内容
  $.each([0,1,2],functiion(i,n){ //i表示当前循环的索引 n表示节点元素,也就是被循环的索引值
    alert("~~~~~~~~"+i+"----------"+n);
  });

eg:遍历对象,同时使用成员名称和变量内容
  $.each({name:"李银河","lang":java},function(i,n){
    alert("名称:"+i+"值"+n)
  });


通常写在回调函数里面
  function(data){
    $.each(data,function(index,node){       //对从服务器返回回来的数据,进行遍历....

    })
  }
eg:
  form2Json: function(id) {
    var arr = $("#" + id).serializeArray()
    var jsonStr = "";
    jsonStr += '{';
    $.each(arr, function(i, field) { //i表示当前循环的索引 field表示节点元素,也就是被循环的 索引值!
      if (field.value) {
         jsonStr += '"' + field.name + '":"' + field.value + '",'
        }
      });


在js中,可以不写分号。























有的内容是自己平日积累的与工作上遇到的,有的是摘抄其他博主的精彩好文(会附上作者),愿大家共同成长。
原文地址:https://www.cnblogs.com/PinkPink/p/8385690.html