整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
單提交， 應該是每個網頁都會存在的一個內容。比如填寫用戶信息，填寫個人資料。
向后臺傳送數據。那么可能就會有一些搗亂的用戶，或者惡意工具服務器的
他可能多次點擊提交按鈕。導致服務器需要解析多次請求
那么就會出現問題。增加服務器壓力。
解決方案1：
通過js ，定義一個全局變量。默認是false,當用戶點擊提交按鈕。把全局變量該為true.
當用戶點擊第二次提交，會如果是true就不再執行提交。
代碼如下
<script type="text/javascript">
var isCommitted=false;//表單是否已經提交標識，默認為false
function dosubmit(){
if(isCommitted==false){
isCommitted=true;//提交表單后，將表單是否已經提交標識設置為true
return true;//返回true讓表單正常提交
} else {
layer.msg("您已經提交過了,信息正在查詢請您耐心等待..")
return false;//返回false那么表單將不提交
}
}
</script>
其次需要在表單onsubmit="return dosubmit()"
用戶點擊提交之后默認轉到該方法下執行代碼
以上一種解決方案，只能解決不懂技術的，小白用戶 但是不能從根本上解決問題
還有一種方式 就是 在服務器做驗證。這也是最佳的解決方案 （推薦使用這種方式）
這種解決方案簡單概括就是：
用戶點擊跳珠表單頁面，會默認生成一個token值。token值可以是uuid+算法生成的唯一值。方式多種多樣都可以
然后把這個token值放入session中，后臺可以通過el表達式把通過key拿出token值，存入form表單中的hidden隱藏表單中
用戶每次提交，連同表單數據和這個token值發送到服務器。服務器去校驗這個token值。
首先校驗這個token值你要知道有幾種情況
第一種：
表單中沒有token，代表他重復叫
第二種
當前session中沒有token，則用戶代表重復提交
第三種
存儲在session中的token令牌與表單Token不同，則代表用戶重復提交
每種情況都要考慮進去，
直接干代碼！！不說廢話了
上面幾種情況 我會單獨 寫出一個工具類
/**
* 判斷客戶端提交上來的令牌和服務器端生成的令牌是否一致
* @param args
* true:表示重復提交
* false:表示沒有重復提交
*/
public static boolean isRepeatSubmit(HttpServletRequest request) {
String client_token=request.getParameter("token");
//第一種情況，如果提交表單沒有token則該用戶是重復提交表單
if (client_token==null){
return true;
}
//取出來存儲在session中的令牌
String server_token=(String) request.getSession().getAttribute("token");
//2、如果當前用戶的Session中不存在Token(令牌)，則用戶是重復提交了表單
if (server_token==null){
return true;
}
//3、存儲在Session中的Token(令牌)與表單提交的Token(令牌)不同，則用戶是重復提交了表單
if (!client_token.equals(server_token)){
return true;
}
return false;
}
2 跳轉頁面生產token值
//該方法主要用于跳轉JSP頁面,并且防止多次提交創建token
@RequestMapping(value="findLogisticsPrice")
public String findLogistics(HttpServletRequest request, HttpServletResponse response){
String token=TokenUtils.getAccessToken(UUID.randomUUID().toString());
request.getSession().setAttribute("token", token);
return "modules/logisticsproviders/freightEstimateIndex";
}
生成token值的代碼為：
/**
* 描述：生成Token方法
* @return
*/
public static String getAccessToken(String uuid){
String key="UZ";
String timestamp=String.valueOf(System.currentTimeMillis());
return HMACSHA256((uuid+timestamp).getBytes(),key.getBytes());
}
3 在業務層直接處理邏輯
//判斷用戶是否是重復提交
boolean b=TokenUtils.isRepeatSubmit(request);
if (b==true){
String ze="請不要重復提交！！！";
return ze;
}
當業務層邏輯快執行完時候
//移除session中的token
request.getSession().removeAttribute("token");
現代web開發中，表單是用戶與網站互動的重要方式之一。HTML5為表單提交提供了強大的功能和豐富的輸入類型，讓收集和驗證用戶輸入數據變得更加容易和安全。本文將詳細介紹HTML5表單的各個方面，包括基本結構、輸入類型、驗證方法和提交過程。
HTML表單由<form>標簽定義，它可以包含輸入字段、標簽、按鈕等元素。一個基本的表單結構如下所示：
<form action="/submit_form" method="post">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<label for="email">電子郵箱：</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="提交">
</form>
在這個例子中，表單有兩個輸入字段：姓名和電子郵箱。每個輸入字段都有一個<label>標簽，這不僅有助于用戶理解輸入的內容，也有助于屏幕閱讀器等輔助技術。<form>標簽的action屬性定義了數據提交到服務器的URL，method屬性定義了提交數據的HTTP方法（通常是post或get）。
HTML5提供了多種輸入類型，以支持不同的數據格式和設備。
<!-- 單行文本 -->
<input type="text" name="username" placeholder="請輸入用戶名" required>
<!-- 密碼 -->
<input type="password" name="password" required minlength="8">
<!-- 郵箱 -->
<input type="email" name="email" required placeholder="example@domain.com">
<!-- 搜索框 -->
<input type="search" name="search" placeholder="搜索...">
<!-- 數值 -->
<input type="number" name="age" min="18" max="100" step="1" required>
<!-- 滑動條 -->
<input type="range" name="volume" min="0" max="100" step="1">
<!-- 電話號碼 -->
<input type="tel" name="phone" pattern="^\+?\d{0,13}" placeholder="+8613800000000">
<!-- 日期 -->
<input type="date" name="birthdate" required>
<!-- 時間 -->
<input type="time" name="appointmenttime">
<!-- 日期和時間 -->
<input type="datetime-local" name="appointmentdatetime">
<!-- 復選框 -->
<label><input type="checkbox" name="interest" value="coding"> 編程</label>
<label><input type="checkbox" name="interest" value="music"> 音樂</label>
<!-- 單選按鈕 -->
<label><input type="radio" name="gender" value="male" required> 男性</label>
<label><input type="radio" name="gender" value="female"> 女性</label>
<!-- 下拉選擇 -->
<select name="country" required>
<option value="china">中國</option>
<option value="usa">美國</option>
</select>
<!-- 顏色選擇器 -->
<input type="color" name="favcolor" value="#ff0000">
<!-- 文件上傳 -->
<input type="file" name="resume" accept=".pdf,.docx" multiple>
HTML5表單提供了內置的驗證功能，可以在數據提交到服務器之前進行檢查。
<input type="text" name="username" required>
<input type="text" name="zipcode" pattern="\d{5}(-\d{4})?" title="請輸入5位數的郵政編碼">
<input type="number" name="age" min="18" max="99">
<input type="text" name="username" minlength="4" maxlength="8">
當用戶填寫完表單并點擊提交按鈕時，瀏覽器會自動檢查所有輸入字段的有效性。如果所有字段都滿足要求，表單數據將被發送到服務器。否則，瀏覽器會顯示錯誤信息，并阻止表單提交。
<input type="submit" value="提交">
可以使用JavaScript來自定義驗證或處理提交事件：
document.querySelector('form').addEventListener('submit', function(event) {
// 檢查表單數據
if (!this.checkValidity()) {
event.preventDefault(); // 阻止表單提交
// 自定義錯誤處理
}
// 可以在這里添加額外的邏輯，比如發送數據到服務器的Ajax請求
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單提交并顯示JSON</title>
</head>
<body>
<!-- 表單定義 -->
<form id="myForm">
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
<br>
<label for="email">電子郵件：</label>
<input type="email" id="email" name="email">
<br>
<input type="button" value="提交" onclick="submitForm()">
</form>
<script>
// JavaScript函數，處理表單提交
function submitForm() {
// 獲取表單元素
var form=document.getElementById('myForm');
// 創建一個FormData對象
var formData=new FormData(form);
// 創建一個空對象來存儲表單數據
var formObject={};
// 將FormData轉換為普通對象
formData.forEach(function(value, key){
formObject[key]=value;
});
// 將對象轉換為JSON字符串
var jsonString=JSON.stringify(formObject);
// 彈出包含JSON字符串的對話框
alert(jsonString);
// 阻止表單的默認提交行為
return false;
}
</script>
</body>
</html>
在這個例子中：
注意，這個例子中我們使用了type="button"而不是type="submit"，因為我們不希望表單有默認的提交行為。我們的JavaScript函數submitForm會處理所有的邏輯，并且通過返回false來阻止默認的表單提交。如果你想要使用type="submit"，你需要在<form>標簽上添加一個onsubmit="return submitForm()"屬性來代替按鈕上的onclick事件。
HTML5的表單功能為開發者提供了強大的工具，以便創建功能豐富、用戶友好且安全的網站。通過使用HTML5的輸入類型和驗證方法，可以確保用戶輸入的數據是有效的，同時提高用戶體驗。隨著技術的不斷進步，HTML5表單和相關API將繼續發展，為前端工程師提供更多的可能性。
天小編給大家帶來的是html表單提交教程，非常簡單！
話不多說直接進入教程
首先要注意的事項：
第一：因為這節課涉及到了php所以本地要安裝php
在這里小編用的是phpStudyphpStudy（特點簡單很適合本地開發測試）
phpStudy界面
第二：在php編碼里一定要注意不要編寫錯誤
<?php //為開頭 //為結尾？>
<?php 這里寫php代碼 ?>
要切記php代碼要以分號未結束 “；”
首頁我們到我們剛剛安裝的軟件根目錄下，找到www這個文件夾
雙擊打開建立一個新文件夾（在這我命名為了表單的拼音你們可以自己命名為你們想命名的名字，切記不能用中文）
在打開剛剛建立好的文件夾創建兩個文件分別命名為orderform.html和processorder.php（當然你也可以自己取名）
我們用編程軟件打開這兩個新建文件（這里我用的是Sublime Text 3）
我們首先給orderform.html寫下如下代碼
然后我們開始寫建立表單
我們訪問本地連接看一下效果
我們在給php寫入代碼
以下為注意事項
<!--<?php //為php代碼 eoch為輸出代碼 $_POST為接收html提交過來的數據 $tireqty=$_POST['tireqty']
//$sj=$_POST['sj']
//$dz=$_POST['dz'] 為給建立的變量賦值? echo "$tireqty";為輸出這個變量-->
首先我們寫入和html一下的html代碼
在寫入php接收函數
完成效果
以下是html里的代碼
<!DOCTYPE html>
<html>
<head>
<!--這里編碼為utf-8國際編碼-->
<meta charset="utf-8">
<!--這里為網站標題-->
<title>表單</title>
</head>
<body>
<!--action為提交的頁面 method為提交類型 分為兩種一種為post還一種為get -->
<form action="processorder.php" method="post">
<!--border="0"為邊框粗細-->
<table border="0">
<!-- bgcolor="#cccccc"為表格背景顏色這里為灰色 -->
<tr bgcolor="#cccccc">
<td>參數</td>
<!-- aligan="center"為表格居中 -->
<td align="center">數據</td>
</tr>
<tr>
<td>姓名</td>
<!-- <input type="text" name="tireqty" size //這里為type為提交類型
text為文本類型 name為名稱和class一樣 size為字體大小-->
<td align="center"><input type="text" name="tireqty" size="3"/></td>
</tr>
<tr>
<td>手機</td>
<td align="center"><input type="text" name="sj" size="3"/></td>
</tr>
<tr>
<td>地址</td>
<td align="center"><input type="text" name="dz" size="3"/></td>
</tr>
<tr>
<!-- <input type="text" value="提交" value為input 元素的值 colspan為合并-->
<td colspan="0" align="center"><input type="submit" value="提交"/></td>
</tr>
</table>
</form>
</body>
</html>
以下是php中代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>接收</title>
</head>
<body>
<form>
<?php
$tireqty=$_POST['tireqty'];
$sj=$_POST['sj'];
$dz=$_POST['dz'];
?>
<table border="0">
<tr>
<td>參數</td>
<td align="center">數據</td>
</tr>
<tr>
<td>姓名</td>
<td align="center"><?php echo "$tireqty"; ?></td>
</tr>
<tr>
<td>手機</td>
<td align="center"><?php echo "$sj"; ?></td>
</tr>
<tr>
<td>地址</td>
<td align="center"><?php echo "$dz"; ?></td>
</tr>
</table>
</form>
</body>
</html>
謝謝觀看，喜歡的就收藏加關注吧！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
