您的位置：首页 > Web前端 > JQuery

jQuery中使用$.ajax提交表单

2015-02-08 17:29 302 查看

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="Scripts/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);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航