jq-ajax

Posted hy96

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq-ajax相关的知识，希望对你有一定的参考价值。

常用属性集合

         $.ajax(
             url:url,
             data:,
             type:"get",
             success:function(),
             timeout:2000,
             error:function(),
             beforeSend:function(),
             dataType:"jsonp",   //跨域必要加
             jsonp:"cb",
             // 是否触发ajax的全局方法
             global:true
         )

分类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    正在测试jq-ajax方法<br>
    <input type="text" id="user">
    <input type="text" id="pass">
    <input type="button" id="btn">
</body>
<script src="../jquery.js"></script>
<script>

    $("#btn").click(function()
        var url = "http://localhost/1908/jq-ajax/data/data.php"
// 最简化的ajax
         $.ajax(
             url:url,
             success:function(res,type,xhr)
                 console.log(res)
             
　　　　　　　　data：user:$("#user").val(),pass:$("#pass").val()  

         )

        // 超时的ajax
         $.ajax(
             url:url,
             success:function(res,type,xhr)
                 console.log(res)
                 console.log(type)
                 console.log(xhr)
             ,
             error:function(a,b,c)
                 console.log(a,b,c)
             ,
             timeout:10
         )

        // loading的ajax
         var img;
         $.ajax(
             url:url,
             success:function(res,type,xhr)
                 img.remove()
                 console.log(res)
             ,
             beforeSend:function()  //在成功收到传过来的数据之前
                 img = $("<img src=‘1.gif‘>");
                 $("body").append(img);
             
         )

        // 跨域的ajax，同时具有loading
         var jsonpUrl = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su"; //百度接口
         var img;
         $.ajax(
             url:jsonpUrl,
             data:
                 wd:$("#user").val()
             ,
             success:function(res,type,xhr)
                 img.remove()   //成功返回数据时就消失
                 console.log(res)
             ,
             dataType:"jsonp",
             jsonp:"cb",
             beforeSend:function()
                 img = $("<img src=‘1.gif‘>");
                 $("body").append(img);
             
         )
        

        // 触发或不触发全局方法的ajax

         $(document).ajaxSuccess(function()
             alert("ajax成功了")
         )
         $(document).ajaxSend(function()
             alert("ajax执行了发送")
         )
         $(document).ajaxStart(function()
             alert("ajax开启了")
         )
        
         $.ajax(
             url:url,
             success:function(res,type,xhr)
                 console.log(res)
             ,
             global:true表示触发  false表示不触发 
         )
        
        
        // 自动解析json数据
         var jsonUrl = "http://localhost/1908/jq-ajax/data/json.php"
         $.ajax(
             url:jsonUrl,
             success:function(res,type,xhr)
                 console.log(res)
             ,
             dataType:"json"    //自动将json中的数据以数组的形式输出来。
         )
    )



</script>
</html>

 若是一个ajax所执行成功的操作与json的位置...许多公共属性都一样。可以设置一个公共类，输出不同的数据就可以了

 $.ajaxSetup(   //公共代码
        url:"http://localhost/1908/jq-ajax/data/data.php",
        success:function(res,type,xhr)
            console.log(res)
        
    )

    $.ajax(
        data:
            user:"admin",
            pass:"123"
        
    )
    $.ajax(
        data:
            user:"admin",
            pass:"123456"
        
    )

 

以上是关于jq-ajax的主要内容，如果未能解决你的问题，请参考以下文章