html中提交表單並實現不跳轉頁面處理返回值
本文中實如今html中使用jquery的組件實現表單提交併在當前頁面中處理返回值。javascript
一、使用AjaxForm方式
（1）、導入js文件css
須要導入相關的js文件。使用ajaxForm方式須要使用到jquery和jquery-form兩個js文件。如：html
<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）、綁定表單java
表單綁定它通常在$(document).ready(function () {}裏定義，它能讓表單不刷新頁面的狀況下POST到目標。如：jquery
$(document).ready(function() {
$("#formLogin").ajaxForm(function(data){
alert("post success." + data);
//Alert("post success.");
});
});
formLogin爲表單的id。ajax
（3）、編寫表單提交代碼json
以下爲一個簡單的表單，提交地址爲userLogin.shtml，成功和失敗都會返回json數據包，數據包在上面綁定的方法中處理。瀏覽器
<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）、運行效果dom
二、使用jquery提供的get/post方法
（1）、引入js文件ide
使用jquery須要引入jquery的相關js文件，如：
<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字段作相應處理。
<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的頁面加載回調獲取提交返回值，涉及到同域名和不一樣域名，這裏先實現相同域名中使用iframe獲取返回值並作相應處理。先看下面的例子：
<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的加載函數，因此須要設定一個標誌位用於記錄是不是提交致使的回調。
四、使用ajaxSubmit提交
在表單的submit方法中調用ajaxSubmit進行提交，在提交前還能夠在哪submit中對數據進行修改。ajaxSubmit的使用詳細請自行查閱。以下爲一個簡單例子：
<!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能夠自行修改驗證。運行失敗效果以下，成功時會定向到新頁面。
五、使用表單的submit提交,可是在submit函數裏面寫上要執行的ajax函數,而且return false;
return false會阻止頁面跳轉
<form id="formLogin" name="formLogin" action="userLogin.shtml" method="post" onsubmit = "checkUser();return false;" >
<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>
function checkUser(){
$.post(url,data,function(data){
//回調須要處理的業務
});
}
相關文章
- 1. html中提交表單並實現不跳轉頁面處理返回值
- 2. 經過form的action屬性提交表單並接收處理返回值的方法（頁面不跳轉）
- 3. 提交form表單頁面不跳轉
- 4. 表單提交不跳轉處理
- 5. 關於form表單提交數據後不跳轉頁面+ajax接收返回值的處理
- 6. CGI表單提交實現頁面不跳轉問題
- 7. html form表單提交不跳轉新頁面
- 8. ajax實現表單提交不跳轉
- 9. html form表單提交後處理返回數據
- 10. Ext.js中使用FormPanel.getForm().submit提交表單並獲得返回值
- 更多相關文章...
- • SVG 在 HTML 頁面 - SVG 教程
- • ASP.NET Web Forms - HTML 頁面 - ASP.NET 教程
- • SpringBoot中properties文件不能自動提示解決方法
- • IntelliJ IDEA中SpringBoot properties文件不能自動提示問題解決
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
