Jquery的ajax用法

Dear 丶 2022-03-15 05:20 249阅读 0赞

> 这篇博客将介绍在jquery中使用ajax的用法和jsonp跨域问题。

在jquery中，共有4中常用的ajax方法：ajax        get        post     getJSON

用法相差不大

话不多说，看代码：

<!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>JQuery-ajax</title>
    </head>
    
    <body>
        <script src="./js/jquery-3.3.1.min.js"></script>
        <script>
            // ajax
            var src = "http://www.一个远程服务器的路径，或者建立一个数据库的相对应阿帕奇库中php文件路径之类";
            $.ajax({
            //     method:'post',
            //     url:src,
            //     data:'',
            //     dataType:'json',
            //     success:function(res){
            //         console.log(res);
            //     },
            //     error:function(){
            //         console.log(1); 
            //     },
            //     async:true
            // })
             $.get({
            //     method:'post',
            //     url:src,
            //     data:'',
            //     dataType:'json',
            //     success:function(res){
            //         console.log(res)
            //     }
    
            // })
             $.post({
            //     method:'post',
            //     url:src,
            //     data:'',
            //     dataType:'json',
            //     success:function(res){
            //         console.log(res);
            //     }
            // })
            // $.getJSON(src, {
    
            // }, function (res) {
            //     console.log(res);
            // });
            // https://www.baidu.com/s?&wd= 搜索接口
            // https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?wd=1&cb=baidudata(实例) 
            // jsonp跨域
            // 利用百度搜索接口，jsonp跨域，实现搜索  都类似
            $.ajax({
            //     method: 'post',
            //     url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?cb=callData",
            //     data:{wd:'csdn'},
            //     dataType: 'jsonp',
            //     jsonpCallback: 'callData',
            //     success: function (res) {
            //         console.log(res.s);
            //     }
            // });
            $.post({
            //     method: 'post',
            //     url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?cb=callData",
            //     data:{wd:'csdn'},
            //     dataType: 'jsonp',
            //     jsonpCallback: 'callData',
            //     success: function (res) {
            //         console.log(res.s);
            //     }
            // })
            $.get({
            //     method:'get',
            //     url:'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?cb=callData',
            //     data:{wd:'csdn'},
            //     dataType:'jsonp',
            //     jsonpCallback:'callData',
            //     success:function(res){
            //         console.log(res.s);
            //     }
            // })
            $.getJSON({
            //     url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/?cb=callData',
            //     data: {
            //         wd: 'csdn'
            //     },
            //     dataType: 'jsonp',
            //     jsonpCallback: 'callData',
            //     success: function (res) {
            //         console.log(res.s);
            //     }
            // })
        </script>
    </body>
    
    </html>