使用jquery完成一个ajax请求

最新推荐文章于 2024-08-09 17:26:52 发布

qq1105273619

最新推荐文章于 2024-08-09 17:26:52 发布

阅读量379

点赞数

分类专栏： javascript

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.$().load(url,callback)

2.$.get(url,data,callback)

3.$.ajax({选项})
url 地址
method 方法(GET,POST)
data 提交给服务器的数据
dataType 服务器返回的数据
timeout 超时时间，单位毫秒
success 成功后的回调函数
error 失败后的回调函数
complete 完成后的回调函数
xhr 回调函数获取xhr引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <title>jquery</title>
</head>
<body>
    <div id="content"></div>
    <button id="btnLoad">Load载入</button>
    <button id="btnGet">Get载入</button>
    <button id="btnAjax">Ajax载入</button>

</body>
</html>
<script>
    $(document).ready( function () {

        $('#btnLoad').click( function () {
            $('#content').load('/content/ p',function () {
                alert('载入成功');
            });
        });

        $('#btnGet').click( function () {
            $.get('/content/',null,function (response) {
                $('#content').html(response);
            });
        });

        $('#btnAjax').click( function () {
            $.ajax({
                url:'/content/',
                method:'Get',
                data:null,
                success: function (response) {
                    $('#content').html(response);
                }
            });
        });




    });
</script>