jQuery实现form表单基于ajax无刷新提交方法详解
本文实例讲述了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实现form表单基于ajax无刷新提交方法详解的更多相关文章
- jquery序列化form表单使用ajax提交后处理返回的json数据
1.返回json字符串: /** 将一个字符串输出到浏览器 */ protected void writeJson(String json) { PrintWriter pw = null; try ...
- jquery序列化from表单使用ajax提交返回json数据(使用struts2注解result type = json)
1.action类引入struts2的"json-default"拦截器栈 @ParentPackage("json-default") //示例 @Paren ...
- 基于Bootstrap+jQuery.validate Form表单验证实践
基于Bootstrap jQuery.validate Form表单验证实践 项目结构 : github 上源码地址:https://github.com/starzou/front-end- ...
- thinkphp处理jQuery EasyUI form表单问题
jQuery EasyUI form表单不是ajax方式提交,而是在提交的时候新建一个隐藏的iframe并在iframe里面创建一个与绑定表单一样的表单,然后在iframe里面进行同步提交而不是异步提 ...
- form表单的ajax验证2
form表单的ajax验证2: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...
- 关于form表单或者Ajax向后台发送数据时,数据格式的探究
最近在做一个资产管理系统项目,其中有一个部分是客户端向服务端发送采集到的数据的,服务端是Django写的,客户端需要用rrequests模块模拟发送请求 假设发送的数据是这样的: data = {'s ...
- laravel中form表单,ajax传值没反应
laravel中form表单,ajax传值没反应时,可能是令牌有问题. form中添加: {{csrf_token()}} ajax中添加: data: {'page': page, '_token' ...
- Django框架 之 Form表单和Ajax上传文件
Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...
- jQuery控制form表单元素聚焦
CreateTime--2017年5月28日08:57:16Author:Marydon jQuery使form表单的第一个文本框聚焦 /** * 使form表单的第一个文本框聚焦 */ func ...
随机推荐
- Centos7添加磁盘并分区格式化
1.安装前准备 [root@localhost ~]# yum install xfsprogs [root@localhost ~]# modprobe xfs [root@localhost ~] ...
- frameset frame 页面空白
<html style="background:#213039;"> <head> <title>网站后台管理中心</title> ...
- Httpclient文件上传
public static void upload(String url,File file,String filename) { CloseableHttpClient httpclient = H ...
- 目标检测论文解读3——Fast R-CNN
背景 deep ConvNet兴起,VGG16应用在图像分类任务上表现良好,本文用VGG16来解决检测任务.SPP NET存在CNN层不能fine tuning的缺点,且之前的方法训练都是分为多个阶段 ...
- C#使用Xamarin开发移动应用 ---- 系列文章
C#使用Xamarin开发移动应用 C#使用Xamarin开发可移植移动应用终章(11.获取设备信息与常用组件,开源一个可开发模版.) C#使用Xamarin开发可移植移动应用进阶篇(10.综合演练, ...
- 201871010126 王亚涛 《面向对象程序设计(java)》 第四周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh/p ...
- crystalreport使用方法
使用: 打开CrystalReport官网下载页 目前最新版本为13.0.4 选择“SAP Crystal Reports, version for Visual Studio 2010 - Stan ...
- 【Linux】查看程序是否正常运行
ps aux|grep redis-server ps -ef |grep redis netstat -tunple|grep 6379 netstat -lntp | grep 6379
- [300iq Contest 1-D]Dates
传送门 Description 每个妹子匹配一个时间区间,每个时间最多选择\(a_i\)个妹子,每个妹子有一个快乐值,最大化总快乐值 Solution 贪心,从大往小取,能取则取 判断是否可以有完美匹 ...
- python 文件读写模式区别,以及如何边写入边保存flush()
如表: 模式 可做操作 若文件不存在 是否覆盖 r 只能读 报错 - r+ 可读可写 报错 是 w 只能写 创建 是 w+ 可读可写 创建 是 a 只能写 创建 否,追加写 a+ 可读可写 创建 否, ...