無重新整理表單資訊提交,使用HTML5新技術FormData
1.傳統的不適用FormData Ajax無重新整理表單提交方式(程式碼量多)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>ajax</title> <style type="text/css"> </style> <script type="text/javascript"> window.onload = init; function init(){ var fm = document.getElementsByTagName('form')[0]; fm.onsubmit = function(){ //收集表單資訊 //ajax負責把收集好的資訊傳遞給伺服器 var nm = document.getElementById('username').value; var pwd = document.getElementById('userpwd').value; var email = document.getElementById('useremail').value; var info = "name="+nm+"&pwd="+pwd+"&email="+email; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState==4){ alert(xhr.responseText); } } xhr.open('post','./04.php'); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(info); //阻止瀏覽器預設動作 跳轉 return false; } } </script> </head> <body> <h2>Ajax無重新整理收集表單並提交表單</h2> <form> <p>使用者名稱:<input type="text" id="username"></input></p> <p>密碼:<input type="password" id="userpwd"></input></p> <p>郵箱:<input type="text" id="useremail"></input></p> <p><input type="submit" value="註冊"></input></p> </form> </body> </html>
./04.php
<?php
//接收post方式傳遞過來的使用者名稱資訊,並做資料校驗
print_r($_POST);
?>
2.利用FormData快速收集表單資料
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>ajax</title> <style type="text/css"> </style> <script type="text/javascript"> window.onload = init; function init(){ var fm = document.getElementsByTagName('form')[0]; fm.onsubmit = function(){ //收集表單資訊 //ajax負責把收集好的資訊傳遞給伺服器 var fd = new FormData(fm); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState==4){ alert(xhr.responseText); } } xhr.open('post','./04.php'); //使用FormData無需設定header頭 //xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(fd); //阻止瀏覽器預設動作 跳轉 return false; } } </script> </head> <body> <h2>Ajax無重新整理收集表單並提交表單</h2> <form> <p>使用者名稱:<input type="text" name="username" id="username"></input></p> <p>密碼:<input type="password" name="userpwd" id="userpwd"></input></p> <p>郵箱:<input type="text" name = "useremail" id="useremail"></input></p> <p><input type="submit" value="註冊"></input></p> </form> </body> </html>
3.使用FormData注意:post方式無需使用setRequestHeader()設定header頭,input輸入框需加上name屬性。
相關推薦
無重新整理表單資訊提交,使用HTML5新技術FormData
利用新技術FormData表單資料物件,可以實現快速收集表單資訊,FormData是html5的新技術,在主流瀏覽器都可以使用。 1.傳統的不適用FormData Ajax無重新整理表單提交方式(程式
Ajax實現無重新整理表單提交
一般方式實現 <!DOCTYPE html> <html> <head> <meta charset = "utf-8">
form表單可以提交,阻止頁面跳轉
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body&g
Tornado實現表單的提交,檔案的獲取
#注意下面的config的配置檔案 from tornado.httpserver import HTTPServer from tornado.ioloop import IOLoop from tornado.options import define, parse_config_file, o
form表單ajax提交,後臺實體接收
js:表單->json物件 $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() {
Validation阻止表單自動提交,使用Ajax提交表單(使用Validation的submitHandler方法)
在使用Validation時,我們有時候不希望驗證成功後直接跳轉頁面(比如判斷登入密碼使用者名稱正確與否),而希望自己使用Ajax提交,並且驗證回撥的結果。 $('.login-form').validate({
在使用django 的過程中難免的會使用到format表單進行提交,如果出現“CSRF驗證失敗. 相應中斷”.該如何解決呢?
CSRF驗證失敗. 相應中斷. 1).首先,我們可以先看一下出現問題的所在的原因。 Your browser is accepting cookies.The view function passes
jsp的表單資料提交,中文出現亂碼的處理
只需要在jsp里加 <% request.setCharacterEncoding( "utf-8");%> <% response.setCharacterEncoding("u
防止表單重複提交,PHP生成token並自動更新
PHP生成token並自動更新。 在業務中,經常會遇到重複提交問題。token是一種解決表單重複提交的思路,token 原理大致為: 1:顯示錶單的那個 action 中使用 makeToken() 生成一個隨機的 token值,稱作 requestToken ,並存放在
thinkphp 解決頁面重新整理表單重複提交的問題
控制器中 session_start(); $code =mt_rand(0,1000000); $_SESSION['code'] = $code; $this->assign('code'
Spring MVC 回退重新整理表單重複提交
基於Spring MVC進行Java Web開發時,如果使用表單進行提交資料,然後跳轉到某個URL由Controller進行處理,最後返回邏輯檢視,框架會通過viewResolver來解析具體的View,然後向返回給瀏覽器顯示【參考】。 <bean
html 提交表單,圖片和文字一起提交,圖片存入伺服器,圖片地址和表單資訊存入資料庫,帶後端php程式碼
html <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no
Form表單只提交數據,頁面不跳轉,返回表單值
bre ava case java ssr ace 引用 except erl html代碼: <form method="post" action="Handler/UserHandler.ashx?action=Test" onsubmit="return Rut
小程式開發----表單資料提交及編輯回顯資料(特別值得看,超詳細)
近些天,我在寫表單資料提交及回顯問題,中間遇到了很多坑,經過看文件,各種百度,從而一一解決。 表單中包括的東西特別多,從API可以看得出來,小程式API中的表單有:input/button/picker/label等,我主要用到了input/button/picker,其中在picker問題的
微信小程式獲取表單初始值,提交改變過的資料
form表單,通過onload(options)獲取的引數給輸入框賦值,提交改變後的引數 <form bindsubmit="submitForm"> <view class='item'> <view class='label'>聯絡
ajax提交表單資訊+手機驗證碼註冊
1.手機驗證碼用的是秒嘀科技的手機簡訊功能。 2、前端頁面 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <
使用LocalStorage儲存使用者已填寫的表單資訊(意外重新整理後自動填充)
先引入一個js檔案:sisyphus.min.js (官網:http://sisyphus-js.herokuapp.com/) 在頁面的script中找個地方引用: $( function() { $( "#basic_form" ).sisyphus(); // or you
使用jQuery.form外掛,實現完美的表單非同步提交
時間真快,轉眼一個月快結束了,一個月沒寫部落格了!手開始生了,怎麼開始呢…… 抓住6月份的尾巴,今天的主題是 通過該外掛,我們可以非常簡單的實現表單的非同步提交,並實現檔案上傳、進度條顯示等等。 現在我們從一個ASP.NET同步表單提交開始,然後再將其轉化為非同步的表單提交。我寫了3
表單資料提交方式,及後臺獲取資料方式
這個和servlet容器有關係,比如tomcat等。 1.get方式 get方式提交的話,表單項都儲存在http header中,格式是 http://localhost:8080/hello.do?name1=value1&name2=value2這樣的字串。se
Jquery Validate校驗後無錯誤提示但表單無法提交(無反應)
今天寫頁面遇到一個問題,頁面上有一個下拉選擇框,添加了必填的校驗之後,填好資料提交表單,並無異常顯示,卻不會提交表單資料到後臺,怎麼點儲存都沒反應。最後發現是頁面上隱藏了一個同樣的下拉框,是因為這個下拉框沒有資料校驗不通過才導致無法提交表單資料的,這個下拉框又是