jQuery+css實(shí)現(xiàn)的切換圖片功能代碼
786
2024-03-12
本文實(shí)例講述了jQuery實(shí)現(xiàn)form表單基于ajax無(wú)刷新提交方法。分享給大家供大家參考，具體如下：
首先，新建Login.html頁(yè)面：
<!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()方法發(fā)送請(qǐng)求</title>
<script type="text/javascript" src="http://www.gimoo.net/t/1904/js/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();//輸入焦點(diǎn)
$("#txtName").keydown(function (event) {
if (event.which == "13") {//回車鍵,移動(dòng)光標(biāo)到密碼框
$("#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());
//開(kāi)始發(fā)送數(shù)據(jù)
$.ajax
({ //請(qǐng)求登錄處理頁(yè)
url: "Login.aspx", //登錄處理頁(yè)
dataType: "html",
//傳送請(qǐng)求數(shù)據(jù)
data: { txtName: strTxtName, txtPass: strTxtPass },
success: function (strValue) { //登錄成功后返回的數(shù)據(jù)
//根據(jù)返回值進(jìn)行狀態(tài)顯示
if (strValue == "True") {//注意是True,不是true
$(".clsShow").html("操作提示，登錄成功！" + strValue);
}
else {
$("#divError").show().html("用戶名或密碼錯(cuò)誤！" + 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，接收并處理數(shù)據(jù)：
<%@ 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);
%>
補(bǔ)充：form使用AJAX提交完整實(shí)例：
//將form轉(zhuǎn)換為AJAX提交
function ajaxSubmit(url,frm,fn){
var dataPara=getFormJson(frm);
$.ajax({
url:url,
type:"post",
data:dataPara,
async:false,
dataType:'txt',
success:fn
});
}
//將form中的值轉(zhuǎn)換為鍵值對(duì)
function getFormJson(frm){
var o={};
var a=$(frm).serializeArray();
$.each(a,function(){
if(o[this.name]!==undefined){
if(!o[this.name].push){
o[this.name]=[o[this.name]];
}
o[this.name].push(this.value || '');
}else{
o[this.name]=this.value || '';
}
});
return o;
}
/*
//前臺(tái)調(diào)用方式
function autoSubmitFun(){
ajaxSubmit("autoSumitScoreAJAX.action",$('#formId'),function(){});
}
*/
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
