Ajax使用POST方式异步提交数据

最新推荐文章于 2025-05-12 10:47:29 发布

江林子

最新推荐文章于 2025-05-12 10:47:29 发布

阅读量942

点赞数

CC 4.0 BY-SA版权

分类专栏： Asp.Net Ajax 文章标签： Ajax使用POST Ajax 异步 asp.net POST

本文链接：https://blog.youkuaiyun.com/xiaogechengxuyuan/article/details/9744679

Asp.Net 同时被 2 个专栏收录

25 篇文章

订阅专栏

Ajax

3 篇文章

订阅专栏

本文介绍了一种使用HttpHandler和JavaScript实现异步用户注册的方法。通过客户端JavaScript收集表单数据并利用Ajax技术发送到服务器，服务器端采用C#处理用户注册逻辑，并返回注册结果。

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

实现异步用户注册

一、使用HttpHandler实现服务器代码：

<%@ WebHandler Language="C#" Class="RegisterAjax" %>

using System;
using System.Web;
using BookShopBLL;
using BookShopModels;

public class RegisterAjax : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        try
        {
            string mess = "";
            context.Response.ContentType = "text/plain";
            Users user = new Users();
            
            //获取用户名，注意这里使用Request.Form[]
            user.LoginId=context.Request.Form["loginId"].ToString();
            //获取密码，注意这里使用Request.Form[]
            user.LoginPwd = context.Request.Form["loginPwd"].ToString();
            user.Name = context.Request.Form["name"].ToString();
            user.Address = context.Request.Form["address"].ToString();
            user.Phone = context.Request.Form["phone"].ToString();
            user.Mail = context.Request.Form["mail"].ToString();

            UserRoles ur = new UserRoles();
            ur.Id = 2;//会员
            UserStates us = new UserStates();
            us.Id = 1;//1.正常 2.无效

            user.UserRole = ur;
            user.UserState = us;

            if (UserManager.Add(user))
            {
                mess = "注册成功！";
            }
            else
            {
                mess = "注册失败!";
            }
            context.Response.Write(mess);
        }
        catch (Exception)
        {
            context.Response.Write("注册失败！");
        }
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }
}

二、页面 javascript 代码：

<script language ="javascript" type="text/javascript" >

    function CreateXmlHttpRequest() {
          if (window.ActiveXObject) {//如果是IE浏览器
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if (window.XMLHttpRequest) {//非IE浏览器
            return new XMLHttpRequest();
        }
    }

    function registerUser() {
        //请求字符串
        var url = "ajaxHandler/RegisterAjax.ashx";

        //获取表单数据
        var loginId = document.getElementById('<%=txtLoginId.ClientID %>').value;
        var name = document.getElementById('<%=txtName1.ClientID %>').value;
        var loginPwd = document.getElementById('<%=txtLoginPwd.ClientID %>').value;
        var email = document.getElementById('<%=txtEmail.ClientID %>').value;
        var address = document.getElementById('<%=txtAddress.ClientID %>').value;
        var phone = document.getElementById('<%=txtTele.ClientID %>').value;

        //拼接信息字符串，escape()方法用来对字符串进行编码
        var userInfo = "loginId=" + escape(loginId) + "&name=" + escape(name)
                        + "&loginPwd=" + loginPwd + "&address=" + address + "&phone=" + phone + "&mail=" + email;

        var xhr = CreateXmlHttpRequest();//创建XmlHttpRequest对象

        //设置回调函数
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                alert(xhr.responseText); //提示信息
            }
        };

        xhr.open("POST", url, true); //使用post

        //setRequestHeader()用来设置请求的头部信息，Content-Type表示内容类型
        //这里将Content-Type设置为application/x-www-form-urlencoded，表示发送的数据为表单数据，
        //这样在服务器端才可以使用Request.Form[]获取到提交的数据。
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        //发送请求
        xhr.send(userInfo);
    }

html提交按钮代码：

<asp:Button ID="btnRegister" OnClick="btnSubmit_Click"   OnClientClick="registerUser(this);return false;" runat="server" Text="确定了，马上提交"
                CssClass="opt_sub"></asp:Button>

OnClientClick="registerUser(this);return false;"中的return false表示不执行服务器端的提交方法。