JQuery -AJAX- html中提交表单并实现不跳转页面处理返回值
2017-04-05 15:26
661 查看
本文中实现在html中使用jQuery的组件实现表单提交并在当前页面中处理返回值。
（1）、导入js文件
需要导入相关的js文件。使用ajaxForm方式需要使用到jquery和jquery-form两个js文件。如：
[html] view
plain copy
print?
<script type="text/javascript" src="http://127.0.0.1/CarAppStore/js/jquery/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="http://127.0.0.1/CarAppStore/js/jquery/jquery-form.js"></script>
（2）、绑定表单
表单绑定它一般在$(document).ready(function () {}里定义，它能让表单不刷新页面的情况下POST到目标。如：
[html] view
plain copy
print?
$(document).ready(function() {
$("#formLogin").ajaxForm(function(data){
alert("post success." + data);
//Alert("post success.");
});
});
formLogin为表单的id。
（3）、编写表单提交代码
如下为一个简单的表单，提交地址为userLogin.shtml，成功和失败都会返回json数据包，数据包在上面绑定的方法中处理。
[html] view
plain copy
print?
<form id="formLogin" name="formLogin" action="userLogin.shtml" method="post">
<h1>用户登录</h1>
<div>
<input type="text" placeholder="用户名" required="" id="username" name="account"/>
</div>
<div>
<input type="password" placeholder="密码" required="" id="password" name="passwd"/>
</div>
<div class="">
<span class="help-block u-errormessage" id="js-server-helpinfo"> </span>
</div>
<div>
<!-- <input type="submit" value="Log in" /> -->
<input type="submit" value="登录" class="btn btn-primary" id="js-btn-login" style="float: left;"/>
<input type="button" value="重置" class="btn btn-primary" id="js-btn-login" style="float: right;" onclick="doReset();"/>
</div>
</form>
（4）、运行效果
（1）、引入js文件
使用jquery需要引入jquery的相关js文件，如：
[html] view
plain copy
print?
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
（2）、js中使用jquery进行提交并处理返回结果
如下使用post提交数据到resource.shtml页面，参数action和id，返回一个json数据，通过判断json数据中result字段做相应处理。
[javascript] view
plain copy
print?
<script type="text/javascript">
function deleteResource(id) {
$("#div_edit").hide();
$.post("resource.shtml", {
action : "delete",
id : id,
}, function(data) {
var obj = new Function("return" + data)();
if(obj.result=="ok") {
location.reload();
}
else {
$.noty.consumeAlert({layout: 'topCenter', type: 'error', dismissQueue: true});
alert(obj.message);
}
});
}
</script>
使用隐藏的iframe的页面加载回调获取提交返回值，涉及到同域名和不同域名，这里先实现相同域名中使用iframe获取返回值并做相应处理。先看下面的例子：
[html] view
plain copy
print?
<html>
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<!-- 处理iframe回调的代码块 -->
<script type="text/javascript">
var handlerFlag = 0;
function setOnloadCallBask(obj, event, handler) {
//for most explores
if (null != obj && null != obj.addEventListener) {
obj.addEventListener(event, handler, false);
}
//for IE
else if (null != obj && null != obj.attachEvent) {
obj.attachEvent('on'+event, handler);
}
//not support
else {
//选择dom元素错误
throw new Error('不支持该dom元素');
}
}
/*
*call back.
*/
function ActionHandler() {
//alert("call");
//文档加载或刷新时也会调用，因此需要通过标志位控制，提交时将标志位置为1，在这里处理之后修改标志位为0
if(0 != handlerFlag) {
//do action
alert("123123");
var value = document.getElementById("ifActionResult").contentWindow.document.body.innerHTML;
if(null!=value) {
var obj = eval("("+value+")");
if(obj.result=="ok") {
top.document.location.href="resource.shtml";
}
else {
window.parent.doNotice(obj.message);
}
}
//update flag.
handlerFlag = 0;
}
}
function sub() {
handlerFlag = 1;
}
</script>
<!-- 处理其他功能的代码块 -->
<script type="text/javascript">
$(document).ready(function() {
//注意这里最好在文档加载完成的时候再获取元素，否则可能获取到的一直是null
setOnloadCallBask(document.getElementById("ifActionResult"),'load',ActionHandler);
});
</script>
</head>
<body>
<h1 id="myHeader">这是标题</h1>
<p>点击标题，会提示出它的值。</p>
<iframe id="ifActionResult" name="ifTmp" width="1px" height="1px" style="display: none;"></iframe>
<form action="" target="ifTmp">
<input type="submit" onClick="sub();" value="测试"/>
</form>
</body>
</html>
关键点：
（1）、一个带id和name的隐藏的iframe,name用于from指定跳转目标使用，id用于js中操作该控件。指定了宽和高为1px用以避免某些浏览器直接不加载该iframe组件。指定style使得iframe不可见。
（2）、将form表单的target指定iframe的name，表单提交后将跳转到该iframe；
（3）、给from设置提交回调函数，该回调函数用于后续区分是否是提交导致的iframe加载回调；
（4）、在document加载完毕（ready）中获取并设置from的onload回调，如果在外面获取可能获取到的控件为null；
（5）、页面加载时也会回调iframe的加载函数，所以需要设定一个标志位用于记录是否是提交导致的回调。
在表单的submit方法中调用ajaxSubmit进行提交，在提交前还可以在哪submit中对数据进行修改。ajaxSubmit的使用详细请自行查阅。如下为一个简单例子：
[html] view
plain copy
print?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户登录</title>
<link rel="stylesheet" type="text/css" href="/CarAppStore/css/login/style.css" />
<link rel="stylesheet" type="text/css" href="/CarAppStore/css/login/body.css"/>
<script type="text/javascript" src="/CarAppStore/js/jquery/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="/CarAppStore/js/jquery/jquery-form.js"></script>
<script type="text/javascript" src="/CarAppStore/js/jquery/jquery-validate.js"></script>
<script type="text/javascript" src="/CarAppStore/js/noty/packaged/jquery.noty.packaged.min.js"></script>
<script type="text/javascript" src="/resource/rcs/safe/md5.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var url="manage/updater.shtml";
var baseRef = window.location.href;
var aa = baseRef.indexOf("=");
if(0 < aa) {
url=baseRef.substring(aa+1);
}
//ajax submit.
$("#formLogin").submit(function() {
var tmp = hex_md5($("#password").val());
$("#txt_passwd").val(tmp);
$(this).ajaxSubmit({
success: function(data) { // data 保存提交后返回的数据，一般为 json 数据
var obj = eval("("+data+")");
if(obj.result=="ok") {
window.location.assign(url);
}
else {
$.noty.consumeAlert({layout: 'top', type: 'error', dismissQueue: true,timeout:2000});
alert("登录失败,请重试!");
}
}
});
return false;
});
});
</script>
</head>
<body>
<div class="container">
<section id="content">
<form id="formLogin" name="formLogin" action="userLogin.shtml" method="post" target="fmResult">
<h1>用户登录</h1>
<div>
<input type="text" placeholder="用户名" required="" id="username" name="account"/>
</div>
<div>
<input type="password" placeholder="密码" required="" id="password" name="password"/>
</div>
<div class="">
<span class="help-block u-errormessage" id="js-server-helpinfo"> </span>
</div>
<div>
<input type="submit" value="登录" class="btn btn-primary" id="js-btn-login" style="float: left;"/>
<input type="reset" value="重置" class="btn btn-primary" id="js-btn-login" style="float: right;"/>
</div>
<div>
<input type="hidden" id="txt_passwd" name="passwd"/>
</div>
</form>
</section><!-- content -->
<div>
<iframe width="1px" height="1px" name="fmResult" style="display: none;"></iframe>
</div>
</div>
<!-- container -->
</body>
</html>
上述例子实现一个简单的登录表单，表单使用jquery validate进行表单验证，在form提交前使用md5对密码进行加密并将加密结果写入到一个隐藏的input中，然后再调用ajaxSubmit进行提交。提交成功之后会将页面重定向到一个传入的参数页面。失败时使用noty弹出一个提示对话框。demo可以自行修改验证。运行失败效果如下，成功时会定向到新页面。
1、使用AjaxForm方式
（1）、导入js文件需要导入相关的js文件。使用ajaxForm方式需要使用到jquery和jquery-form两个js文件。如：
[html] view
plain copy
print?
<script type="text/javascript" src="http://127.0.0.1/CarAppStore/js/jquery/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="http://127.0.0.1/CarAppStore/js/jquery/jquery-form.js"></script>
（2）、绑定表单
表单绑定它一般在$(document).ready(function () {}里定义，它能让表单不刷新页面的情况下POST到目标。如：
[html] view
plain copy
print?
$(document).ready(function() {
$("#formLogin").ajaxForm(function(data){
alert("post success." + data);
//Alert("post success.");
});
});
formLogin为表单的id。
（3）、编写表单提交代码
如下为一个简单的表单，提交地址为userLogin.shtml，成功和失败都会返回json数据包，数据包在上面绑定的方法中处理。
[html] view
plain copy
print?
<form id="formLogin" name="formLogin" action="userLogin.shtml" method="post">
<h1>用户登录</h1>
<div>
<input type="text" placeholder="用户名" required="" id="username" name="account"/>
</div>
<div>
<input type="password" placeholder="密码" required="" id="password" name="passwd"/>
</div>
<div class="">
<span class="help-block u-errormessage" id="js-server-helpinfo"> </span>
</div>
<div>
<!-- <input type="submit" value="Log in" /> -->
<input type="submit" value="登录" class="btn btn-primary" id="js-btn-login" style="float: left;"/>
<input type="button" value="重置" class="btn btn-primary" id="js-btn-login" style="float: right;" onclick="doReset();"/>
</div>
</form>
（4）、运行效果
2、使用jquery提供的get/post方法
（1）、引入js文件使用jquery需要引入jquery的相关js文件，如：
[html] view
plain copy
print?
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
（2）、js中使用jquery进行提交并处理返回结果
如下使用post提交数据到resource.shtml页面，参数action和id，返回一个json数据，通过判断json数据中result字段做相应处理。
[javascript] view
plain copy
print?
<script type="text/javascript">
function deleteResource(id) {
$("#div_edit").hide();
$.post("resource.shtml", {
action : "delete",
id : id,
}, function(data) {
var obj = new Function("return" + data)();
if(obj.result=="ok") {
location.reload();
}
else {
$.noty.consumeAlert({layout: 'topCenter', type: 'error', dismissQueue: true});
alert(obj.message);
}
});
}
</script>
3、使用隐藏iframe
使用隐藏的iframe的页面加载回调获取提交返回值，涉及到同域名和不同域名，这里先实现相同域名中使用iframe获取返回值并做相应处理。先看下面的例子：[html] view
plain copy
print?
<html>
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<!-- 处理iframe回调的代码块 -->
<script type="text/javascript">
var handlerFlag = 0;
function setOnloadCallBask(obj, event, handler) {
//for most explores
if (null != obj && null != obj.addEventListener) {
obj.addEventListener(event, handler, false);
}
//for IE
else if (null != obj && null != obj.attachEvent) {
obj.attachEvent('on'+event, handler);
}
//not support
else {
//选择dom元素错误
throw new Error('不支持该dom元素');
}
}
/*
*call back.
*/
function ActionHandler() {
//alert("call");
//文档加载或刷新时也会调用，因此需要通过标志位控制，提交时将标志位置为1，在这里处理之后修改标志位为0
if(0 != handlerFlag) {
//do action
alert("123123");
var value = document.getElementById("ifActionResult").contentWindow.document.body.innerHTML;
if(null!=value) {
var obj = eval("("+value+")");
if(obj.result=="ok") {
top.document.location.href="resource.shtml";
}
else {
window.parent.doNotice(obj.message);
}
}
//update flag.
handlerFlag = 0;
}
}
function sub() {
handlerFlag = 1;
}
</script>
<!-- 处理其他功能的代码块 -->
<script type="text/javascript">
$(document).ready(function() {
//注意这里最好在文档加载完成的时候再获取元素，否则可能获取到的一直是null
setOnloadCallBask(document.getElementById("ifActionResult"),'load',ActionHandler);
});
</script>
</head>
<body>
<h1 id="myHeader">这是标题</h1>
<p>点击标题，会提示出它的值。</p>
<iframe id="ifActionResult" name="ifTmp" width="1px" height="1px" style="display: none;"></iframe>
<form action="" target="ifTmp">
<input type="submit" onClick="sub();" value="测试"/>
</form>
</body>
</html>
关键点：
（1）、一个带id和name的隐藏的iframe,name用于from指定跳转目标使用，id用于js中操作该控件。指定了宽和高为1px用以避免某些浏览器直接不加载该iframe组件。指定style使得iframe不可见。
（2）、将form表单的target指定iframe的name，表单提交后将跳转到该iframe；
（3）、给from设置提交回调函数，该回调函数用于后续区分是否是提交导致的iframe加载回调；
（4）、在document加载完毕（ready）中获取并设置from的onload回调，如果在外面获取可能获取到的控件为null；
（5）、页面加载时也会回调iframe的加载函数，所以需要设定一个标志位用于记录是否是提交导致的回调。
4、使用ajaxSubmit提交
在表单的submit方法中调用ajaxSubmit进行提交，在提交前还可以在哪submit中对数据进行修改。ajaxSubmit的使用详细请自行查阅。如下为一个简单例子：[html] view
plain copy
print?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户登录</title>
<link rel="stylesheet" type="text/css" href="/CarAppStore/css/login/style.css" />
<link rel="stylesheet" type="text/css" href="/CarAppStore/css/login/body.css"/>
<script type="text/javascript" src="/CarAppStore/js/jquery/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="/CarAppStore/js/jquery/jquery-form.js"></script>
<script type="text/javascript" src="/CarAppStore/js/jquery/jquery-validate.js"></script>
<script type="text/javascript" src="/CarAppStore/js/noty/packaged/jquery.noty.packaged.min.js"></script>
<script type="text/javascript" src="/resource/rcs/safe/md5.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var url="manage/updater.shtml";
var baseRef = window.location.href;
var aa = baseRef.indexOf("=");
if(0 < aa) {
url=baseRef.substring(aa+1);
}
//ajax submit.
$("#formLogin").submit(function() {
var tmp = hex_md5($("#password").val());
$("#txt_passwd").val(tmp);
$(this).ajaxSubmit({
success: function(data) { // data 保存提交后返回的数据，一般为 json 数据
var obj = eval("("+data+")");
if(obj.result=="ok") {
window.location.assign(url);
}
else {
$.noty.consumeAlert({layout: 'top', type: 'error', dismissQueue: true,timeout:2000});
alert("登录失败,请重试!");
}
}
});
return false;
});
});
</script>
</head>
<body>
<div class="container">
<section id="content">
<form id="formLogin" name="formLogin" action="userLogin.shtml" method="post" target="fmResult">
<h1>用户登录</h1>
<div>
<input type="text" placeholder="用户名" required="" id="username" name="account"/>
</div>
<div>
<input type="password" placeholder="密码" required="" id="password" name="password"/>
</div>
<div class="">
<span class="help-block u-errormessage" id="js-server-helpinfo"> </span>
</div>
<div>
<input type="submit" value="登录" class="btn btn-primary" id="js-btn-login" style="float: left;"/>
<input type="reset" value="重置" class="btn btn-primary" id="js-btn-login" style="float: right;"/>
</div>
<div>
<input type="hidden" id="txt_passwd" name="passwd"/>
</div>
</form>
</section><!-- content -->
<div>
<iframe width="1px" height="1px" name="fmResult" style="display: none;"></iframe>
</div>
</div>
<!-- container -->
</body>
</html>
上述例子实现一个简单的登录表单，表单使用jquery validate进行表单验证，在form提交前使用md5对密码进行加密并将加密结果写入到一个隐藏的input中，然后再调用ajaxSubmit进行提交。提交成功之后会将页面重定向到一个传入的参数页面。失败时使用noty弹出一个提示对话框。demo可以自行修改验证。运行失败效果如下，成功时会定向到新页面。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- html中提交表单并实现不跳转页面处理返回值
- html中提交表单并实现不跳转页面处理返回值
- html 提交表单，但不跳转页面处理返回值
- 实现ajax提交表单，页面不跳转
- 通过form的action属性提交表单并接收处理返回值的方法（页面不跳转）
- jquery 渲染 html() text() val() document.write() 和ajax实现页面跳转
- jquery 页面跳转 表单提交
- jquery,ajax多表单提交实现代码
- 利用JQuery实现HTML页面跳转
- Jquery通过Ajax方式来提交Form表单的具体实现
- Jquery通过Ajax方式来提交Form表单的具体实现
- ajax提交session超时跳转页面使用全局的方法来处理
- Servlet处理表单重复提交and利用referer防盗链and实现request包含页面
- 黄聪：Jquery+php+ajax实现表单异步提交，动态添加回复评论
- jQuery:ajax处理html页面
- jQuery实现Ajax异步提交表单实现局部刷新
- CGI表单提交实现页面不跳转问题
- jquery实现表单中选择框/选中按钮是否选中遍历检查(提交页面中选择题答案)
- Jquery通过Ajax方式来提交Form表单的具体实现
- 利用jquery form 实现ajax 提交form表单