好资源导航 » 文章资讯 » jQuery实现form表单基于ajax无刷新提交方法实例代码

jQuery实现form表单基于ajax无刷新提交方法实例代码

2023-08-09 22:54:04 78

本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法。分享给大家供大家参考，具体如下：

首先，新建Login.html页面：




$.ajax()方法发送请求


body
{
font-size:13px;
}
.divFrame
{
width:225px;
border:solid1px#666;
}
.divFrame.divTitle
{
padding:5px;
background-color:#eee;
height:23px;
}
.divFrame.divTitlespan
{
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:solid1px#cc3300;
padding:2px;
display:none;
margin-bottom:5px;
background-color:#ffe0a3;
}
.txt
{
border:#6661pxsolid;
padding:2px;
width:150px;
margin-right:3px;
}
.btn
{
border:#6661pxsolid;
padding:2px;
width:50px;
}


$(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(){//“登录”按钮单击事件
//获取用户名称
varstrTxtName=encodeURI($("#txtName").val());
//获取输入密码
varstrTxtPass=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);
}
}
})
})
})






用户登录

名称：

密码：

然后，新建Login.aspx，接收并处理数据：

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Login.aspx.cs"Inherits="JSDemo.Login"ResponseEncoding="gb2312"%>
<%
stringstrName=System.Web.HttpUtility.UrlDecode(Request["txtName"]);
stringstrPass=System.Web.HttpUtility.UrlDecode(Request["txtPass"]);
boollogin=false;
if(strName=="admin"&&strPass=="admin")
{
login=true;
}
Response.Write(login);
%>

补充：form使用AJAX提交完整实例：

//将form转换为AJAX提交
functionajaxSubmit(url,frm,fn){
vardataPara=getFormJson(frm);
$.ajax({
url:url,
type:"post",
data:dataPara,
async:false,
dataType:'txt',
success:fn
});
}
//将form中的值转换为键值对
functiongetFormJson(frm){
varo={};
vara=$(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||'';
}
});
returno;
}
/*
//前台调用方式
functionautoSubmitFun(){
ajaxSubmit("autoSumitScoreAJAX.action",$('#formId'),function(){});
}
*/

以上就是关于jQuery实现ajax无刷新提交的全部知识点，感谢大家的学习和对毛票票的支持。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

jQuery实现form表单基于ajax无刷新提交方法实例代码

热门推荐

随机推荐