前端HTML表单提交如何调用PHP处理方法及代码示例
锛堝紑绡囧満鏅紩鍏ワ級
浣犺偗瀹氶亣鍒拌繃杩欑鎯呭喌锛氬湪缃戦〉濉畬娉ㄥ唽淇℃伅锛岀偣鍑绘彁浜ゆ寜閽悗锛屸€?strong>鈥嬮〉闈㈢獊鐒惰烦杞埌涓€涓┖鐧介〉鈥?/strong>鈥嬶紝鍚撳緱璧剁揣妫€鏌ユ槸涓嶆槸瀵嗙爜杈撻敊浜嗭紵鍒厡锛佷粖澶╁挶浠氨鎵嬫妸鎵嬭В鍐宠繖涓弽浜虹被鐨勪氦浜掕璁★紝鈥?strong>鈥嬭琛ㄥ崟鎻愪氦鍚庤繕鑳戒紭闆呭湴鍋滅暀鍦ㄥ師椤甸潰鈥?/strong>鈥嬶紝椤哄甫鎶婃暟鎹畨鍏ㄩ€佸埌PHP鎵嬮噷澶勭悊锛?/p>
鍦烘櫙璁惧畾锛氱敤鎴锋敞鍐屽崱鍦ㄦ渶鍚庝竴姝?/h3>
鍋囪浣犳鍦ㄥ紑鍙戜竴涓鍧涚綉绔欙紝鐢ㄦ埛鍙嶉娉ㄥ唽鏃舵€婚亣鍒拌繖涓や釜闂锛?/p>
- 鎻愪氦鍚庨〉闈㈠己鍒跺埛鏂帮紝宸插～鍐欑殑鍐呭鍏ㄦ秷澶?/li>
- 鏄庢槑鐢ㄦ埛鍚嶈鍗犵敤浜嗭紝绯荤粺鍗村彧鏄剧ず"鎻愪氦澶辫触"
鈥?strong>鈥嬪挶浠殑鐩爣鈥?/strong>鈥嬶細
鉁?鎻愪氦鏃堕〉闈笉璺宠浆
鉁?瀹炴椂鏄剧ず"鐢ㄦ埛鍚嶅凡琚敞鍐?绛夋彁绀?br/>
鉁?鏁版嵁瀹夊叏浼犺緭鍒癙HP绔牎楠?/p>
涓€銆佸厛鎼炰釜浼?璇磋瘽"鐨勮〃鍗?/h3>
鍩虹HTML缁撴瀯锛堝甫褰╄泲鍔熻兘锛夛細
html杩愯澶嶅埗<form id="regForm" onsubmit="return handleSubmit(event)">
<input type="text" name="username" placeholder="鍙栦釜鐐叿鐨勬樀绉? required autofocus>
<input type="password" name="password" placeholder="瀵嗙爜鑷冲皯6浣?
pattern=".{6,}" title="鍒伔鎳掞紒瀵嗙爜瑕?浣嶄互涓婂摝">
<button type="submit" id="submitBtn">椹笂鍔犲叆button>
form>
<div id="message">div>
<form id="regForm" onsubmit="return handleSubmit(event)">
<input type="text" name="username" placeholder="鍙栦釜鐐叿鐨勬樀绉? required autofocus>
<input type="password" name="password" placeholder="瀵嗙爜鑷冲皯6浣?
pattern=".{6,}" title="鍒伔鎳掞紒瀵嗙爜瑕?浣嶄互涓婂摝">
<button type="submit" id="submitBtn">椹笂鍔犲叆button>
form>
<div id="message">div>鈥?strong>鈥嬩笁涓殣钘忕煡璇嗙偣鈥?/strong>鈥嬶細
autofocus灞炴€ц椤甸潰鎵撳紑鏃惰嚜鍔ㄨ仛鐒﹁緭鍏ユpattern灞炴€у疄鐜板墠绔垵姝ユ牸寮忔牎楠?/li>- 琛ㄥ崟ID鍜屾寜閽甀D涓哄悗缁搷浣滃煁浼忕瑪
浜屻€佽JavaScript褰?蹇€掑皬鍝?
鎷︽埅浼犵粺鎻愪氦鏂瑰紡锛堥噸鐐逛唬鐮侊級锛?/h4>
javascript澶嶅埗function handleSubmit(event) {
event.preventDefault(); // 闃绘琛ㄥ崟榛樿璺宠浆
const formData = new FormData(document.getElementById('regForm'));
const submitBtn = document.getElementById('submitBtn');
// 闃叉姈澶勭悊锛氱鐢ㄦ寜閽槻姝㈤噸澶嶆彁浜?/span>
submitBtn.disabled = true;
submitBtn.textContent = '鎻愪氦涓?..';
// 寮€濮嬪悜PHP鍙戦€佹暟鎹?/span>
fetch('process_reg.php', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(result => {
document.getElementById('message').innerHTML = result;
submitBtn.disabled = false;
submitBtn.textContent = '椹笂鍔犲叆';
});
}
function handleSubmit(event) {
event.preventDefault(); // 闃绘琛ㄥ崟榛樿璺宠浆
const formData = new FormData(document.getElementById('regForm'));
const submitBtn = document.getElementById('submitBtn');
// 闃叉姈澶勭悊锛氱鐢ㄦ寜閽槻姝㈤噸澶嶆彁浜?/span>
submitBtn.disabled = true;
submitBtn.textContent = '鎻愪氦涓?..';
// 寮€濮嬪悜PHP鍙戦€佹暟鎹?/span>
fetch('process_reg.php', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(result => {
document.getElementById('message').innerHTML = result;
submitBtn.disabled = false;
submitBtn.textContent = '椹笂鍔犲叆';
});
}鈥?strong>鈥嬩唬鐮佽В璇烩€?/strong>鈥嬶細
event.preventDefault()鏄€?strong>鈥嬮樆姝㈤〉闈㈣烦杞殑鍏抽敭鈥?/strong>鈥?/li>FormData瀵硅薄鑷姩鎵撳寘琛ㄥ崟鍐呭- 鎸夐挳鐘舵€佸彉鍖栨彁鍗囩敤鎴蜂綋楠?/li>
涓夈€丳HP绔鍋氬摢浜涗簨锛?/h3>
process_reg.php 鏂囦欢绀轰緥锛?/h4>
php澶嶅埗<?php
// 寮€鍚敊璇彁绀猴紙寮€鍙戦樁娈靛繀澶囷級
ini_set('display_errors', 1);
error_reporting(E_ALL);
// 鎺ユ敹鏁版嵁
$username = $_POST['username'] ?? '';
$password = $_POST['password'] ?? '';
// 妯℃嫙鏁版嵁搴撴煡璇?/span>
$registeredUsers = ['灏忔槑', '鎶€鏈畢', '寮犱笁'];
if (in_array($username, $registeredUsers)) {
echo "鍝囧摝~杩欎釜鏄电О宸茬粡琚姠娉ㄥ暒锛?/span>";
exit;
}
// 瀵嗙爜鍔犲瘑瀛樺偍锛堝畨鍏ㄥ繀鍋氾級
$hashedPassword = password_hash($password, PASSWORD_DEFAULT);
// 鍋囪杩欓噷鎵ц鏁版嵁搴撴彃鍏ユ搷浣?/span>
// $db->query("INSERT INTO users ...");
echo "馃帀 娉ㄥ唽鎴愬姛锛?绉掑悗鑷姩璺宠浆...";
?>
php澶嶅埗<?php // 寮€鍚敊璇彁绀猴紙寮€鍙戦樁娈靛繀澶囷級 ini_set('display_errors', 1); error_reporting(E_ALL); // 鎺ユ敹鏁版嵁 $username = $_POST['username'] ?? ''; $password = $_POST['password'] ?? ''; // 妯℃嫙鏁版嵁搴撴煡璇?/span> $registeredUsers = ['灏忔槑', '鎶€鏈畢', '寮犱笁']; if (in_array($username, $registeredUsers)) { echo "鍝囧摝~杩欎釜鏄电О宸茬粡琚姠娉ㄥ暒锛?/span>"; exit; } // 瀵嗙爜鍔犲瘑瀛樺偍锛堝畨鍏ㄥ繀鍋氾級 $hashedPassword = password_hash($password, PASSWORD_DEFAULT); // 鍋囪杩欓噷鎵ц鏁版嵁搴撴彃鍏ユ搷浣?/span> // $db->query("INSERT INTO users ..."); echo "馃帀 娉ㄥ唽鎴愬姛锛?绉掑悗鑷姩璺宠浆..."; ?>
鈥?strong>鈥嬫敞鎰忚繖涓や釜鍧戔€?/strong>鈥嬶細
- 姘歌繙涓嶈鐩存帴瀛樺偍鏄庢枃瀵嗙爜锛?/li>
- 鐪熷疄鍦烘櫙瑕佺敤棰勫鐞嗚鍙ラ槻SQL娉ㄥ叆
鍥涖€侀亣鍒伴棶棰樻€庝箞鑷煡锛?/h3>
瀵圭収杩欎唤鎺掓煡娓呭崟锛?/h4>
| 鐜拌薄 | 鍙兘鍘熷洜 | 瑙ｅ喅鍔炴硶 |
|---|---|---|
| 鐐瑰嚮鎻愪氦娌″弽搴?/td> | 蹇樿event.preventDefault() | 妫€鏌ュ嚱鏁版槸鍚﹁姝ｇ‘璋冪敤 |
| PHP鏀朵笉鍒版暟鎹?/td> | 琛ㄥ崟瀛楁name鎷煎啓閿欒 | 瀵规瘮$_POST閿悕鍜孒TML琛ㄥ崟 |
| 杩斿洖缁撴灉涔辩爜 | 鏈缃甈HP鏂囦欢缂栫爜 | 娣诲姞header('Content-Type:text/html; charset=utf-8') |
| 鏈湴娴嬭瘯鎶ヨ法鍩熼敊璇?/td> | 鏈惎鍔ㄦ湰鍦版湇鍔″櫒 | 鐢╔AMPP/WAMP鎴朧S Code鐨凩ive Server鎻掍欢 |
涓汉韪╁潙缁忛獙鍒嗕韩
鍋氫簡浜斿勾琛ㄥ崟鎻愪氦鍔熻兘锛屾垜鍙戠幇鈥?strong>鈥?0%鐨勭炕杞︿簨鏁呴兘鏄綆绾ч敊璇€?/strong>鈥嬨€備笂鍛ㄦ湁涓鍛樻娲绘敹涓嶅埌PHP杩斿洖鐨勬暟鎹紝鏈€鍚庡彂鐜板眳鐒舵槸娴忚鍣ㄧ紦瀛樹簡鏃х増JS鏂囦欢锛佹帹鑽愪袱涓繚鍛戒範鎯細
- 鈥?strong>鈥嬪紑鍙戞椂姘歌繙寮€鎺у埗鍙帮紙F12锛夆€?/strong>鈥嬶細Network鏍囩鑳界洿鎺ョ湅鍒拌姹傚拰鍝嶅簲
- 鈥?strong>鈥嬬粰姣忎釜璇锋眰鎵撴爣璁扳€?/strong>鈥嬶細鍦║RL鍚庡姞
?v=1.0涔嬬被鐨勫弬鏁板己鍒跺埛鏂扮紦瀛?/li>
鏈€杩戝彂鐜板緢澶氭柊鎵嬬洸鐩拷姹侫jax寮傛鎻愪氦锛屽叾瀹炩€?strong>鈥嬩紶缁焒orm鎻愪氦鍦ㄦ煇浜涘満鏅洿楂樻晥鈥?/strong>鈥嬨€傛瘮濡傛枃浠朵笂浼犮€侀渶瑕佹祻瑙堝櫒榛樿琛屼负鏃讹紝涓嶅Θ鐢?code>
杩欑鏂瑰紡淇濇寔椤甸潰涓嶈烦杞€傛妧鏈€夊瀷灏卞儚绌胯。鏈嶏紝鍚堥€傛瘮鏃堕鏇撮噸瑕侊紒本文由嘻道妙招独家原创，未经允许，严禁转载