html中Form表單提交時頁面不跳轉的方法詳解

黄舟
發布: 2018-05-26 16:32:23
原創
21680 人瀏覽過


1.1 解決方案一
        表單action 提交數據,但頁面不跳轉,Iframe可以解決。
實例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Form提交表单页面不跳转</title>
</head>
<body>
    <form action="" method="post" target="myIframe">
        <label for="input_text">账户:</label>
        <input type="text" id="input_text" name="input_text">
        <label for="input_pwd">密码:</label>
        <input type="text" id="input_pwd" name="input_text">
        <input type="submit" id="submit" name="submit" value="提交">
    </form>
    <iframe id="myIframe" name="myIframe"></iframe>
</body>
</html>
登入後複製

注意:Form元素的target屬性一定是指定要顯示傳回結果的iframe元素的name屬性。
            Iframe元素可放入身體體內的任何位置,也可放入form元素中。

1.2 採用Ajax來實現,無刷新技巧
       直接以javascript讀取input元素的值,然後放到函數中的變數讓ajax去處理。
實例-js serialize或serializeArray方法來序列化表單資料:

<form>  
First name: <input type="text" name="FirstName" value="Bill" /><br />  
Last name: <input type="text" name="LastName" value="Gates" /><br />  
</form>  
<button id="btn">序列化表单值</button>
登入後複製
$("#btn").click(function(){
var x=$("form").serializeArray();  
console.log(x); //执行结果:[{name: "FirstName", value: "Bill" },{name: "LastName",  value: "Gates" }]
var y=$("form").serialize();
console.log(y); //执行结果:FirstName=Bill&LastName=Gates 
});
登入後複製

注意:serializeArray()方法會傳回一個json值,而serialize ()方法則會傳回string值。

#

以上是html中Form表單提交時頁面不跳轉的方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!