随笔- 95  文章- 401  评论- 65  阅读- 156万 
asp.net Jquery表单html和后台交互

Html页面1

 

复制代码
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>纯Jquery表单和后台交互</title>
    <script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnSubmit").click(function () {
                $.ajax({
                    type: "post",
                    url: "Handler01.ashx",
                    data: "txtUserName=" + $.trim($("#txtUserName")[0].value) + "&txtUserPwd=" + $.trim($("#txtUserPwd")[0].value),
                    success: function (result) {
                        $("#msg").html(result);
                    }
                });

                return false;
            });
        });
    </script>
</head>
<body>
    <form id="frmUserInfo" action="#">
    <table>
        <tr>
            <td>
                姓名
            </td>
            <td>
                <input type="text" id="txtUserName" />
            </td>
        </tr>
        <tr>
            <td>
                密码
            </td>
            <td>
                <input type="password" id="txtUserPwd" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" id="btnSubmit" value="提交" />
            </td>
        </tr>
    </table>
    </form>
    <div id="msg"></div>
</body>
</html>
复制代码

 

Handler01
复制代码
using System.Web;

namespace Test
{
    /// <summary>
    /// Handler 的摘要说明
    /// </summary>
    public class Handler01 : IHttpHandler
    {
        /// <summary>
        /// 请求处理
        /// </summary>
        /// <param name="context"></param>
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            // 方式1
            string userName = context.Request.Params["txtUserName"].ToString();
            string userPwd = context.Request.Params["txtUserPwd"].ToString();

            context.Response.Write(string.Format("姓名：{0}，密码：{1}",userName, userPwd));
            context.Response.End();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
复制代码

Html页面2

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>纯Jquery表单和后台交互</title>
    <script type="text/javascript" src="lib/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnSubmit").click(function () {
                $.ajax({
                    type: "post",
                    url: "Handler02.ashx",
                    data: $("#frmUserInfo").serialize(),
                    success: function (result) {
                        $("#msg").html(result);
                    }
                });

                return false;
            });
        });
    </script>
</head>
<body>
    <form id="frmUserInfo" action="#">
    <table>
        <tr>
            <td>
                姓名
            </td>
            <td>
                <input type="text" id="txtUserName" name="txtUserName" />
            </td>
        </tr>
        <tr>
            <td>
                密码
            </td>
            <td>
                <input type="password" id="txtUserPwd" name="txtUserPwd" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" id="btnSubmit" value="提交" />
            </td>
        </tr>
    </table>
    </form>
    <div id="msg"></div>
</body>
</html>
复制代码

Handler02
复制代码
 using System.Web;

namespace Test
{
    /// <summary>
    /// Handler 的摘要说明
    /// </summary>
    public class Handler02 : IHttpHandler
    {
        /// <summary>
        /// 请求处理
        /// </summary>
        /// <param name="context"></param>
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            // 方式2（对应表单序列化）
            string userName = context.Request.Form["txtUserName"].ToString();
            string userPwd = context.Request.Form["txtUserPwd"].ToString();

            context.Response.Write(string.Format("姓名：{0}，密码：{1}", userName, userPwd));
            context.Response.End();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}
复制代码

 



 posted on   纳米程序员  阅读(1423)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 字符编码：从基础到乱码解决
点击右上角即可分享
微信分享提示
AI IDE Trae