溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文將為大家詳細介紹“html中Form表單提交時頁面不跳轉怎么實現”，內容步驟清晰詳細，細節處理妥當，而小編每天都會更新不同的知識點，希望這篇“html中Form表單提交時頁面不跳轉怎么實現”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內容如下，一起去收獲新知識吧。
html的全稱為超文本標記語言，它是一種標記語言，包含了一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動畫、聲音、表格、鏈接等，主要和css+js配合使用并構建優雅的前端網頁。
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元素可以放到body中的任何位置，也可以放到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表單提交時頁面不跳轉怎么實現”這一關鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領會，如果想閱讀更多相關內容的文章，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
