微信小程序有了_jQuery完成form表单基于ajax无改写

jQuery实现form表单基于ajax无刷新提交方法实例代码       在本篇文章里小编给大家整理了关于jQuery实现form表单基于ajax无刷新提交方法实例代码，需要的朋友们参考下。

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

<页面：

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"TR/xhtml1/DTD/xhtml1-transitional.dtd" 
 html xmlns="1999/xhtml" 
 head 
 title $.ajax()方法发送请求 /title 
 script type="text/javascript" src="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();//输入焦点
 $("#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
 $(".("操作提示，登录成功！" + strValue);
 else {
 $("#("用户名或密码错误！" + strValue);
 /script 
 /head 
 body 
 form id="frmUserLogin" 
 div 
 div 
 span 用户登录 /span 
 /div 
 div 
 div 
 div id="divError" 
 /div 
 div 
 名称： input id="txtName" type="text" / /div 
 div 
 密码： input id="txtPass" type="password" / /div 
 div 
 input id="btnLogin" type="button" value="登录" / 
 input id="btnReset" type="reset" value="取消" / 
 /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);
% 

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

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

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