zoukankan      html  css  js  c++  java
  • 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中,可以不写分号。























    有的内容是自己平日积累的与工作上遇到的,有的是摘抄其他博主的精彩好文(会附上作者),愿大家共同成长。
  • 相关阅读:
    蒟蒻の搜索学习总结
    蒟蒻の红黑树总结
    数据结构与算法
    linux常用命令
    Linux防火墙Firewall和Iptables的使用
    Spring Boot 自定义Intercepter
    Spring Boot 自定义Filter
    SpringBoot 全局异常配置
    SpringBoot设置支持跨域请求
    springboot整合shiro安全框架
  • 原文地址:https://www.cnblogs.com/PinkPink/p/8385690.html
Copyright © 2011-2022 走看看