Penjelasan terperinci tentang pelaksanaan kaedah penyerahan borang borang jQuery berdasarkan ajax tanpa refresh

Penjelasan terperinci tentang pelaksanaan kaedah penyerahan borang borang jQuery berdasarkan ajax tanpa refresh_jquery

WBOY

Lepaskan： 2016-05-16 15:27:00

asal

1266 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara jQuery melaksanakan kaedah penyerahan borang berdasarkan ajax tanpa memuat semula. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Mula-mula, buat halaman Login.html baharu:

<!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" /> &nbsp
     <input id="btnReset" type="reset" value="取消" class="btn" />
    </div>
   </div>
  </div>
 </div>
 </form>
</body>
</html>

Salin selepas log masuk

Kemudian, buat Login.aspx baharu untuk menerima dan memproses data:

<%@ 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);
%>

Salin selepas log masuk

Tambahan: borang menyerahkan contoh lengkap menggunakan 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(){});
 }
*/

Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.