JQuery对AJAX的封装与实现_jq的ajqx,怎么做封装-CSDN博客

本文链接：https://blog.csdn.net/weixin_39218464/article/details/108694212

简单请求的3种方法

1、 $.get(URL,callback); 
2、 $.post(URL[,data,callback,datatype]); 
3、 jq对象.load(url,data,callback);$.post(‘请求地址’, {a:100,b:200}, function(data){console.log(data)})

get方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script src="./jquery-3.4.1.min.js"></script>
</head>
<body>
    <input type="text" id = "mytext"><button id="btn">查看成语</button>
    <hr>
    <label id="showpy"></label>
</body>
</html>

<script type="text/javascript">
    $('#btn').click(function(){
        var str = $("#mytext").val();
        //get方法：$get(url,callback);
        var url = "https://route.showapi.com/1196-1?showapi_appid=371252&"+"showapi_sign=669590083d714ea3aec4e62051115b12&keyword="+str;

        $.get(url,function (data){
            //这个回调函数执行的时间是连接到服务器并响应数据到客户端浏览器时间
            //服务器响应过来的数据直接放在函数的参数
           // console.log(data.showapi_res_body.data[2].title);//data就是一个对象
           $("#showpy").html(data.showapi_res_body.data[2].title);
        });
    })
</script>

POST方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script src="./jquery-3.4.1.min.js"></script>
</head>
<body>
    <input type="text" id = "mytext"><button id="btn">查看成语</button>
    <hr>
    <label id="showpy"></label>
</body>
</html>

<script type="text/javascript">
    $('#btn').click(function(){
        var str = $("#mytext").val();
        //post方法：$.post(URL[,data,callback,datatype]); datatype:json/html/text/xml
        var url = "https://route.showapi.com/1196-1";
        data = {
            showapi_appid: "371252",
            showapi_sign: "669590083d714ea3aec4e62051115b12",
            keyword: str
        }
        $.post(url,data,function(backdata){
            $("#showpy").html(backdata.showapi_res_body.data[2].title);
        },"json");
    })
</script>

load方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script src="./jquery-3.4.1.min.js"></script>
</head>
<body>
    <input type="text" id = "mytext"><button id="btn">查看成语</button>
    <hr>
    <label id="showpy"></label>
</body>
</html>

<script type="text/javascript">
    $('#btn').click(function(){
        var str = $("#mytext").val();
        //load方法：jq对象.load(url,data,callback);
        var url = "https://route.showapi.com/1196-1";
        data = {
            showapi_appid: "371252",
            showapi_sign: "669590083d714ea3aec4e62051115b12",
            keyword: str
        }
        
        $("#showpy").load(url,data,function(){
            alert("远程数据接收成功");
        });
    })
</script>

常用ajax方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script src="./jquery-3.4.1.min.js"></script>
</head>
<body>
    <input type="text" id = "mytext"><button id="btn">查看成语</button>
    <hr>
    <label id="showpy"></label>
</body>
</html>

<script type="text/javascript">
    $('#btn').click(function(){
        var str = $("#mytext").val();
        //ajax方法：
        var url = "https://route.showapi.com/1196-1";
        data = {
            showapi_appid: "371252",
            showapi_sign: "669590083d714ea3aec4e62051115b12",
            keyword: str
        }
        
        $.ajax({
                url:url,//请求地址
                type:'post',//post还是get方式请求
                contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                dataType: "json", //可以是json,text,html,xml等
                data:data,//要传送的数据
                success:function(data){
                    $("#showpy").html(data.showapi_res_body.data[2].title);
                },
                async:false,//是否异步
                timeout:2000,
                error:function(err){
                    // alert('请求失败');

                    console.log(err);
                }
             })

    })
</script>