• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

jQuery中Ajax的使用

开发技术 开发技术 2周前 (05-03) 3次浏览

  在使用原生Ajax发送一个请求时,过程多少有点繁琐,jQuery中对于Ajax请求有它自己的封装好的函数,使用起来分方便。

 在jQuery中有专门的Ajax封装,具体参照JQuery-Ajax参考手册网址

这里用一段练习代码展示下使用方法:

//使用要引入jQuery文件 <script src="../jq/jquery-1.12.4.min.js"></script>
  
$.ajax({
     url:"http://localhost:3000/users",
     type:"get",
     dataType:"json",
     data:{"id":3},
     beforeSend:function(xhr){
     console.log("before send");
 },
success:function(data){
      console.log(data);
 },
 error:function(){
      console.log("请求error");
  },
 complete:function(xhr){
      console.log("complete");
      console.log(xhr);
 }
})

关于jQuery中$.ajax() 的几个参数介绍:

  • url:请求地址;

  • type:请求方法,默认为”get”;

  • dataType:服务端响应数据类型;

  • contentType:请求体内容的类型,默认“application/x-www-form-urlencode”;

  • data:需要传输到服务器的数据,如果是get则通过、url传递;post则通过请求体传递;

  • timeout:请求超时时间;

  • beforeSend:请求发起之前触发;

  • success:请求成功之后触发(响应状态码200);

  • error:请求失败触发;

  • complete:请求完成后触发(不管成功与否)

jQuery中其他请求:

  • $.get(),获取数据

    jQuery中get请求快捷方法:$.get(url,data,callback回调函数,返回的数据格式datatype);

    //发送 get请求 
    $.get("http://localhost:3000/liuyan",{"content":"hi"},
    function(data){
        console.log(data);
    });
    
  • $.post,添加数据

    $.post(url,data,callback)

    //发送post请求  $.post(url,data,callback,datatype)
    $.post("http://localhost:3000/liuyan",{"content":"ajax","userId":1},
            function(data){
                console.log(data);
            })
    
  • $.put,更改数据

    //put 请求
    $.ajax({
         url:"http://localhost:3000/liuyan/5",//需要在地址上标出改的主键
         type:"put",
         dataType:"json",
         data:{"content":"put 请求啊"},//改的内容
         success:function(data){
         console.log(data)
         }
    })
    
  • $delete,删除数据

    //删除数据 delete请求
    $.ajax({
        url:"http://localhost:3000/liuyan/6",
        type:"delete",
        success:function(data){
        console.log(data);
        }
    })
    
    //删除数据 delete请求
    $.ajax({
          url:"http://localhost:3000/liuyan/6",
          type:"delete",
          success:function(data){
             console.log(data);
          }
    })
    
  • $.ajaxSetup() 方法设置全局 AJAX 默认选项。

    $.ajaxSetup({
            url:"https://localhost:3000",
            type:post
    });
    $.ajax({
           data:{"name":"value"}
    });
    
  • 等等还有很多方法,可以参考jquery-Ajax手册。


程序员灯塔
转载请注明原文链接:jQuery中Ajax的使用
喜欢 (0)