信鸽网

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

  作者：bea

本文实例讲述了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"&g

本文实例讲述了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程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: