jQuery使用$.ajax提交表单完整实例

前端技术 2023/09/03 JavaScript

本文实例讲述了jQuery使用$.ajax提交表单的方法。分享给大家供大家参考，具体如下：

首先，新建Login.html页面：

<!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>$.ajax()方法发送请求</title>
 <script type=\"text/javascript\" src=\"jquery-1.4.1.js\"></script>
 <style type=\"text/css\">
  body
  {
   font-size: 13px;
  }
  .divFrame
  {
   width: 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;
   width: 150px;
   margin-right: 3px;
  }
  .btn
  {
   border: #666 1px solid;
   padding: 2px;
   width: 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=\"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);
%>

希望本文所述对大家jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/6306

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案