jqyery+ajax 提交表单

首先添加一个login.html 代码如下:

<title>$.Ajax()方法发送请求</title>
<script type="text/javascript" src="jquery-1.4.1.js"></script>
<style type="text/css">
body
{
  font-size: 13px;
}
.divFrame
{
   225px;  
  border: solid 1px #666;
}
.divFrame .divTitle
{
  padding: 5px;
  background-color: #eee;
  height: 23px;
}
.divFrame .divTitle span
{
  float: left;
  padding: 2px;
  padding-top: 5px;
}
.divFrame .divContent
{
  padding: 8px;
  text-align: center;
}
.divFrame .divContent .clsShow
{
  font-size: 14px;
  line-height: 2.0em;
}
.divFrame .divContent .clsShow .clsError
{
  font-size: 13px;
  border: solid 1px #cc3300;
  padding: 2px;
  display: none;
  margin-bottom: 5px;
  background-color: #ffe0a3;
}
.txt
{
  border: #666 1px solid;
  padding: 2px;
   150px;
  margin-right: 3px;
}
.btn
{
  border: #666 1px solid;
  padding: 2px;
   50px;
}
</style>
<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>
</head>
<body>
  <form id="frmUserLogin">
  <div class="divFrame">
    <div class="divTitle">
    <span>用户登录</span>
    </div>
  <div class="divContent">
    <div class="clsShow">
      <div id="divError" class="clsError">
      </div>
    <div>
    名称:<input id="txtName" type="text" class="txt" />
    </div>
    <div>
    密码:<input id="txtPass" type="password" class="txt" />
    </div>
    <div>
    <input id="btnLogin" type="button" value="登录" class="btn" />
    <input id="btnReset" type="reset" value="取消" class="btn" />
    </div>
    </div>
   </div>
  </div>
</form>
</body>
</html>

添加login.aspx页面 代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="WebApplication3.Login" %>
<%
  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);
%>

原文地址:https://www.cnblogs.com/liuruipeng/p/7617115.html