jQuery使用$.ajax提交表单完整实例


Posted in Javascript onDecember 11, 2015

本文实例讲述了jQuery使用$.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="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);
%>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
快速保存网页中所有图片的方法
Jun 23 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
jquery indexOf使用方法
Aug 19 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
jQuery使用$.ajax进行即时验证实例详解
Dec 11 #Javascript
JavaScript基础篇(6)之函数表达式闭包
Dec 11 #Javascript
jQuery弹簧插件编写基础之“又见弹窗”
Dec 11 #Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 #Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 #Javascript
Express的路由详解
Dec 10 #Javascript
在 Express 中使用模板引擎
Dec 10 #Javascript
You might like
PHP syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
PHP计数器的实现代码
2013/06/08 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
Javascript 对象的解释
2008/11/24 Javascript
javascript 有用的脚本函数
2009/05/07 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
Javascript 数组排序详解
2014/10/22 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
python3编写C/S网络程序实例教程
2014/08/25 Python
python字符串的常用操作方法小结
2016/05/21 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
Python selenium自动化测试模型图解
2020/04/15 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
建筑经济管理专业求职信分享
2014/01/06 职场文书
《从现在开始》教学反思
2014/04/15 职场文书
合作协议书
2014/04/23 职场文书
高二学生评语大全
2014/04/25 职场文书
人事任命书怎么写
2014/06/05 职场文书
美化环境标语
2014/06/20 职场文书
创先争优标语
2014/06/27 职场文书
中秋客户感谢信
2015/01/22 职场文书
化妆品促销活动总结
2015/05/07 职场文书
详解MySQL 用户权限管理
2021/04/20 MySQL
Mysql MVCC机制原理详解
2021/04/20 MySQL
教你使用pyinstaller打包Python教程
2021/05/27 Python