無重新整理表單資訊提交，使用HTML5新技術FormData

阿新 • • 發佈：2019-01-12

利用新技術FormData表單資料物件，可以實現快速收集表單資訊，FormData是html5的新技術，在主流瀏覽器都可以使用。

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中的表單有：ｉｎｐｕｔ／ｂｕｔｔｏｎ／ｐｉｃｋｅｒ／ｌａｂｅｌ等，我主要用到了ｉｎｐｕｔ／ｂｕｔｔｏｎ／ｐｉｃｋｅｒ，其中在ｐｉｃｋｅｒ問題的

微信小程式獲取表單初始值，提交改變過的資料

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校驗後無錯誤提示但表單無法提交（無反應）

今天寫頁面遇到一個問題，頁面上有一個下拉選擇框，添加了必填的校驗之後，填好資料提交表單，並無異常顯示，卻不會提交表單資料到後臺，怎麼點儲存都沒反應。最後發現是頁面上隱藏了一個同樣的下拉框，是因為這個下拉框沒有資料校驗不通過才導致無法提交表單資料的，這個下拉框又是

無重新整理表單資訊提交，使用HTML5新技術FormData

相關推薦