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 相关文章推荐
JavaScript 命名空间 使用介绍
Aug 29 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
Bootstrap栅格系统学习笔记
Nov 25 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
js判断节假日实例代码
Dec 27 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
Nest.js 授权验证的方法示例
Feb 22 Javascript
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 快速生成 Flash 动画的方法
2007/03/06 PHP
10个实用的PHP代码片段
2011/09/02 PHP
PHP实现计算器小功能
2020/08/28 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
Javascript 陷阱 window全局对象
2008/11/26 Javascript
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
JavaScript变量的作用域全解析
2015/08/14 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
axios post提交formdata的实例
2018/03/16 Javascript
详解JavaScript中的数组合并方法和对象合并方法
2018/05/11 Javascript
[06:53]DOTA2每周TOP10 精彩击杀集锦vol.3
2014/06/25 DOTA
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
python查找目录下指定扩展名的文件实例
2015/04/01 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
深入理解Django-Signals信号量
2019/02/19 Python
python实现加密的方式总结
2020/01/19 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
python能做哪些生活有趣的事情
2020/09/09 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
Html5自定义字体解决方法
2019/10/09 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
营销主管自我评价怎么写
2013/09/19 职场文书
学生的自我鉴定范文
2013/10/24 职场文书
医药类个人求职的自我评价
2014/02/12 职场文书
小学清明节活动方案
2014/03/08 职场文书
学习礼仪心得体会
2014/09/01 职场文书
赔偿协议书
2015/01/27 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python