JQuery——Ajax实现三大方法的应用及区别（get,post,ajax）

最新推荐文章于 2021-08-06 15:03:41 发布

老陈聊架构

最新推荐文章于 2021-08-06 15:03:41 发布

阅读量773

点赞数

分类专栏： # 『ASP.NET』⭐ 文章标签： JQuery Ajax

本文链接：https://blog.csdn.net/qq_34202873/article/details/86759541

版权

『ASP.NET』⭐ 专栏收录该内容

55 篇文章 14 订阅

订阅专栏

JQuery中Ajax三大方法的应用及区别

在这里插入图片描述

1. $.get()方法

在这里插入图片描述

<script type="text/javascript">
    $(function () {
        $("#send").click(function () {
            $.get("AjaxHandler.ashx", {
                username: $("#username").val(),
                content: $("#content").val()
            },
             function (data, status) {
                 $("#resText").html(data);//把返回的数据添加到页面上
             });
        });
    });
</script>

2. $.post()方法

在这里插入图片描述

<script type="text/javascript">
    $(function () {
        $("#send").click(function () {
            $.post("AjaxHandler.ashx", {
                username: $("#username").val(),
                content: $("#content").val()
            },
             function (data, status) {
                 $("#resText").html(data);//把返回的数据添加到页面上
             });
        });
    });
</script>

3. $.ajax()方法

在这里插入图片描述

<script type="text/javascript">
    $(function () {
        $("#send").click(function () {
            $.ajax({
                type: "post",
                timeout: 5000,//设置服务器请求超时的时间
                url: "AjaxHandler.ashx",//提交的地址
                data: $("#form1").serialize(),//序列化表单
                beforeSend: function () {//表单提交前执行的函数
                    return confirm("确认要提交吗？");
                },
                error: function () {
                    alert("提交失败！");
                },
                success: function (data) {
                    $("#resText").html(data);
                }
            });
        });
    });
</script>