jQuery实现form表单基于ajax无刷新提交方法详解

2019-11-20 11:03:40

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jQuery实现form表单基于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="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       $(".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);%>

补充：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程序设计有所帮助。

上一篇：基于JavaScript创建动态Dom

下一篇：JS判断当前页面是否在微信浏览器打开的方法