使用jQuery简化ajax操作

最新推荐文章于 2025-08-13 21:05:35 发布

weixin_30411819

最新推荐文章于 2025-08-13 21:05:35 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

文章标签： javascript c# ViewUI

原文链接：http://www.cnblogs.com/huanghai/archive/2009/11/30/1614084.html

本文介绍如何使用ASP.NET和jQuery实现网页上的异步通信功能。通过一个简单的示例，展示了如何发送异步请求并接收服务器响应，同时利用jQuery进行页面元素更新，改善用户体验。

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

代码

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312"%>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            if (Request.Form["name"] != null)
            {
                System.Threading.Thread.Sleep(3000);
                Response.Write(Request.Form["name"] + "：你好，异步通信数据传输成功！");
                Response.End();
            }
        }
    }
</script>
<html>
<head runat="server">
    <title>Untitled Page</title>
    <style type="text/css">
    body{font-size:12px; line-height:30px;}
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
       //提交数据
        function ajax(){
            $.post(
            "index.aspx",
            {
                name:"尊敬的朋友"
             },
            function(data){
                $("#divData").text(data);
            }
            )
        }

        $(document).ready(function(){
        //开始请求
        $("#jindu").ajaxStart(function(){
               $("#divData").html(null);
               $(this).show();
             });
        //请求结束时
        $("#jindu").ajaxStop(function(){
               $(this).hide();
             });
       });
    </script>
</head>
<body>
        <input id="Button1" type="button" value="异步通信测试" onclick="ajax();" />
        <div id="divData"></div>
        <div id="jindu" style="display:none;">数据正在提交，请稍后…</div>
</body>
</html>

转载于:https://www.cnblogs.com/huanghai/archive/2009/11/30/1614084.html