jq-ajax-CFANZ编程社区

常用属性集合

$.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的位置...许多公共属性都一样。可以设置一个公共类，输出不同的数据就可以了

//公共代码"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"
        }
    })

长风破浪会有时，直挂云帆济沧海