[jquery ajax]Jquery ajax 简洁方式提交表单form

【www.bbyears.com--jquery】

最简单就这样

 

 代码如下 $.post("/index.php?action=ajax&rs=TWProAjax::checkProTermsExisted", $(this).serialize(), function(data){
}，"json");

注意serialize就是把你表单所有input以post形式或get形式提交过去了，下面看个实例

我们有一个非常普通的表单：

首先，新建Login.html页面：

 代码如下


   
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
   
    <script type="text/javascript">
        $(function () {
            $("#txtName").focus();//输入焦点
            $("#txtName").keydown(function (event) {
                if (event.which == "13") {//回车键,移动光标到密码框
                    $("#txtPass").focus();
                }
            });
            $("#txtPass").keydown(function (event) {
                if (event.which == "13") {//回车键，用.ajax提交表单
                    $("#btnLogin").trigger("click");
                }
            });
            $("#btnLogin").click(function () { //“登录”按钮单击事件
                //获取用户名称
                var strTxtName = encodeURI($("#txtName").val());
                //获取输入密码
                var strTxtPass = encodeURI($("#txtPass").val());
                //开始发送数据
                $.ajax
                ({ //请求登录处理页
                    url: "Login.aspx", //登录处理页
                    dataType: "html",
                    //传送请求数据
                    data: { txtName: strTxtName, txtPass: strTxtPass },
                    success: function (strValue) { //登录成功后返回的数据
                        //根据返回值进行状态显示
                        if (strValue == "True") {//注意是True,不是true
                            $(".clsShow").html("操作提示，登录成功！" + strValue);
                        }
                        else {
                            $("#divError").show().html("用户名或密码错误！" + strValue);
                        }
                    }
                })
            })
        })
    </script>


   

   
       
            用户登录
       
       
           
               
               
               
                    名称：
               
                    密码：word" class="txt" />
               
                      
                   
               
           
       
   
   

然后，新建Login.aspx，接收并处理数据

 代码如下

：<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="JSDemo.Login" ResponseEncoding="gb2312"%>

 
<%
    string strName = System.Web.HttpUtility.UrlDecode(Request["txtName"]);
    string strPass = System.Web.HttpUtility.UrlDecode(Request["txtPass"]);
    bool login = false;
    if (strName == "admin" && strPass == "admin")
    {
        login = true;
    }
    Response.Write(login);
%>

最关键就是下面这段代码

 代码如下

   $("#btnLogin").click(function () { //“登录”按钮单击事件
                //获取用户名称
                var strTxtName = encodeURI($("#txtName").val());
                //获取输入密码
                var strTxtPass = encodeURI($("#txtPass").val());
                //开始发送数据
                $.ajax
                ({ //请求登录处理页
                    url: "Login.aspx", //登录处理页
                    dataType: "html",
                    //传送请求数据
                    data: { txtName: strTxtName, txtPass: strTxtPass },
                    success: function (strValue) { //登录成功后返回的数据
                        //根据返回值进行状态显示
                        if (strValue == "True") {//注意是True,不是true
                            $(".clsShow").html("操作提示，登录成功！" + strValue);
                        }
                        else {
                            $("#divError").show().html("用户名或密码错误！" + strValue);
                        }
                    }
                })

本文来源：http://www.bbyears.com/wangyezhizuo/45367.html