jquery ajax 简单范例

最新推荐文章于 2023-06-30 16:34:23 发布

原创最新推荐文章于 2023-06-30 16:34:23 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

web [模块] 同时被 2 个专栏收录

129 篇文章

订阅专栏

C# MVC4 or MVC5 [模块]

89 篇文章

订阅专栏

本文详细介绍了如何利用jQuery的AJAX和load方法从服务器获取并展示文本内容，包括同步和异步请求，以及处理请求状态的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

界面:

<script>
    $(document).ready(function () {
        $("#b01").click(function () {
            htmlobj = $.ajax({ url: "/Content/upFile/测试.txt", async: false });
            $("#div01").html(htmlobj.responseText);
        });
    });


    $(document).ready(function () {
        $("#test").load("/Content/upFile/测试2.txt #p1", function (responseTxt, statusTxt, xhr) {
            if (statusTxt == "success")
                alert("外部内容加载成功！" + xhr);
            if (statusTxt == "error")
                alert("Error: " + xhr.status + ": " + xhr.statusText);
        });
    });


    $(document).ready(function () {
        $("#getbutton").click(function () {
            $.get("/DownSet/index", function (data, status) {
                alert("数据：" + data + "\n状态：" + status);
            });
        });
    });


    $(document).ready(function () {
        $("#postbutton").click(function () {
            $.get("/CustomerInformation/getS", { par: "ww" }, function (data, status) {
                alert("数据：" + data + "\n状态：" + status);
                $("#postText").html(data);
            });
            
        });
    });




</script>

<div id="div04">
    <h2 id="postText">post方法加载文本后 会在这里显示</h2> 
    <input type="button" value="post方法获取" id="postbutton" />
</div>


<div id="div03">
    <h2 id="getText">get方法加载文本后 会在这里显示</h2> 
    <input type="button" value="get方法获取" id="getbutton" />
</div>


<div id="div02">
    <h2>jquery load方法加载的显示在这里</h2> 
    <h2 id="test">加载文本后 会在这里显示</h2> 
</div>


<div id="div01">
    <h2>加载文本后 会在这里显示</h2> 
</div>
<p>
    <input type="button" value="加载文本" id="b01"/>
</p>

后台:

public string getS(string par)
        {
            string content = "";
            if (par.Equals("ww"))
            {
                content = "cheng gong le";
            }
            else 
            {
                content = "shi bai le";
            }
            return content;
        }