JQ学习二十三：JQ中的ajax请求

JQ中的ajax请求：

$.ajax({
type: "请求方法",
url: "请求地址",
data: 请求参数,
dataType: "返回的数据类型",
success: function(data, textStatus) {
console.log(data) //data: 后端返回的数据
     }    //请求成功后，调用的方法：data成功后返回的数据，textStatus成功后返回的状态文本
}

示例：

$.ajax中的url参数，url的协议、地址、端口必须和访问此html文件的url地址是一样的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="jquery-3.3.1.min.js" type="text/javascript" charset="UTF-8"></script>
    </head>
    <body>
        <button id="btn">按钮</button>
        <div id="box">
            
        </div>
        <script type="text/javascript">
            $("#btn").bind("click", function() {
                // 请求json数据的地址: http://192.168.1.100/Json/cdJson.json
                $.ajax({
                    type: "get",
                    url: "",
                    data: {a:1, b:2},
                    dataType: "json",
                    success: function(data, textStatus) {
                        console.log(data) //data: 后端返回的数据
                        var d = data["abc"]
                        console.log(d)
                        
                        for (var i = 0; i < d.length; i++) {
                            var info = d[i]
                            var $p = $("<p>" + info["title"] + "</p>")
                            $("#box").append($p)
                        }
                        
                    }
                })
            })
        </script>
    </body>
</html>

 

在使用JQ的ajax获取异步数据时，可能使用得以下方法：

 

                $(document).ajaxStart(function() {
                    $("#msg").show();
                })
                $(document).ajaxStop(function() {
                    $("#msg").html("数据获取成功").slideUp(1000);
                })

 

posted on 2018-12-09 20:57  myworldworld  阅读(154)  评论(0)    收藏  举报

导航