JQuery Ajax详解

Posted code_____monkey

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery Ajax详解相关的知识,希望对你有一定的参考价值。

function test_ajax()
   $.ajax(
   
      type:"GET",//通常会用到两种:GET,POST。默认是:GET
      url:"a.php",//(默认: 当前页地址) 发送请求的地址
      dataType:"html",//预期服务器返回的数据类型。
      beforeSend:beforeSend, //发送请求
      success:callback, //请求成功
      error:error,//请求出错 
      complete:complete//请求完成
   );

function error(XMLHttpRequest, textStatus, errorThrown)
  // 通常情况下textStatus和errorThown只有其中一个有值 
  $("#showResult").append("<div>请求出错啦!</div>");

function beforeSend(XMLHttpRequest)
  $("#showResult").append("<div><img src='loading.gif' /><div>");

function complete(XMLHttpRequest, textStatus)
  $("#showResult").remove();

function callback(msg)
  $("#showResult").append("<div>请求成功,回传数:"+msg+"<div>");

--------------------设置同步异步--------------------
$.ajaxSettings.async = false;
$.ajaxSettings.async = true;
----------post请求----------------------
$.ajax(
            url:httpUrl+"/api/auth/login",
            type:"post",    //请求方式
            data:JSON.stringify(form),
            contentType:"application/json",  //缺失会出现URL编码,无法转成json对象
            
            success:function(data)
                
            ,
            error: function (e) //请求失败,包含具体的错误信息
              
           ,complete: function (XMLHttpRequest,status)

           
        );

--------------------get 请求----------------------------
$.ajax(
                type: "GET",
                contentType: "application/json;charset=UTF-8",
                url: httpUrl + "/find",
                data: "",
                dataType: 'json',
                success: function (result)

                ,
                error: function (e) //请求失败,包含具体的错误信息
                    console.error(e.status);
                    console.error(e.responseText);
                    swal("网络错误","","error");
               
            );


$.ajax(
    url: httpUrl + '/findTable/'+sourceTable,
    type: 'get',
    async: false,    //默认设置为true,所有请求均为异步请求。
    dataType: 'json',
    success: function (res)
       
    ,
    error: function (XMLHttpRequest)
        
    
    );

$.ajax(
    url: httpUrl + "/matedata/scheduler/unusual/discard/" + id,
    type: "get",
    success: function (res)
        
    
);


$.ajax(
    url:httpUrl+"/matedata/itfs/ele/queryElectricityByCustomerNo"+'?auth_id='+authId,
    type:"get",
    timeout: 1000,    //设置本地的请求超时时间(以毫秒计)。此设置将覆盖$.ajaxSetup()方法的全局设置。
    success:function(data)
        
    ,
    error: function (e) //请求失败,包含具体的错误信息
        swal("网络错误","","error");
    ,
    complete: function (XMLHttpRequest,status)
        
    
);
------------put 请求--------------

$.ajax(

                url:httpUrl+"front",

                type:"put",

                data:JSON.stringify(json),

                contentType:"application/json",  //缺失会出现URL编码,无法转成json对象

                success:function(data)

               

            );

-----------delete 请求---------------

$.ajax(

                    type: "DELETE",

                    contentType: "application/json;charset=UTF-8",

                    url: httpUrl + "/Domain/" + id,

                    data: JSON.stringify(),

                    success: function (result)

                    ,

                    //请求失败,包含具体的错误信息

                    error: function (e)

                        console.log(e.status);

                        console.log(e.responseText);

                        layer.msg("网络错误");

                   

                );

-----------------------------
回调函数
如果要处理 $.ajax() 得到的数据,则需要使用回调函数:beforeSend、error、dataFilter、success、complete。

beforeSend
在发送请求之前调用,并且传入一个 XMLHttpRequest 作为参数。
beforeSend: function(XMLHttpRequest)
  

error
在请求出错时调用。传入 XMLHttpRequest 对象,描述错误类型的字符串以及一个异常对象(如果有的话)
error: function (e) //请求失败,包含具体的错误信息 error(xhr,status,error)
               console.log(e.status);
               console.log(e.responseText);
               lightyear.notify('网络错误', 'danger', 100, 'mdi mdi-emoticon-sad', 'top','');
           ,
dataFilter
在请求成功之后调用。传入返回的数据以及 "dataType" 参数的值。并且必须返回新的数据(可能是处理过的)传递给 success 回调函数。
dataFilter:function(data, type)
    return data;

success
当请求之后调用。传入返回后的数据,以及包含成功代码的字符串。
success:function(data)    //success(result,status,xhr)
    if(data.code==0)
        
    else if(data.code==-1)
        console.error(data.message);
    else
        lightyear.notify(data.message, 'danger', 100, 'mdi mdi-emoticon-sad', 'top','');
    
,

complete
当请求完成之后调用这个函数,无论成功或失败。传入 XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串。
,complete: function (XMLHttpRequest,status)
               
           

------其他文件上传查看 文件上传的文章-----------

jquery + springboot文件上传_yonghutwo的专栏-CSDN博客

以上是关于JQuery Ajax详解的主要内容,如果未能解决你的问题,请参考以下文章

jquery ajax 方法及各参数详解

jQuery Ajax实例各种使用方法详解

Jquery使用ajax参数详解

jQuery的ajax详解

Jquery中$.ajax()方法参数详解

Jquery ajax提交表单几种方法详解