jQuery如何实现form表单基于ajax无刷新提交方法-内江站浩晨众云

新闻中心

这里有您想知道的互联网营销解决方案

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

这篇文章将为大家详细讲解有关jQuery如何实现form表单基于ajax无刷新提交方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联公司2013年成立，是专业互联网技术服务公司，拥有项目网站制作、成都网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元元氏做网站,已为上家服务,为元氏各地企业和个人服务,联系电话:13518219792

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

首先，新建Login.html页面：




 $.ajax()方法发送请求
 
 
 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;
 }
 
 
 $(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);
   }
   }
  })
  })
 })
 


 
 
 
  用户登录

名称：

密码：

然后，新建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是什么

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

关于“jQuery如何实现form表单基于ajax无刷新提交方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

本文题目：jQuery如何实现form表单基于ajax无刷新提交方法
文章转载：http://www.jxjierui.cn/article/pdhogi.html

新闻中心

jquery是什么

其他资讯