我想用ajaxSumbit實現提交表單但不跳轉頁面的功能,但怎麼調整頁面還是會跳轉,beforeSumbit、success也都沒有正常顯示,請各位提供指導,謝謝。
demo1.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script lanaguage='javascript'>
$(document).ready(function() {
var options = {
target: '#output1', // 用伺服器返回的資料 更新 id為output1的內容.
beforeSubmit: showRequest, // 提交前
success: showResponse, // 提交後
//Other:
//url: url // 預設是form的action,如果寫的話,會覆蓋from的action.
//type: type // 預設是form的method,如果寫的話,會覆蓋from的method.('get' or 'post').
//dataType: null // 'xml', 'script', or 'json' (接受服務端返回的型別.)
//clearForm: true // 成功提交後,清除所有的表單元素的值.
resetForm: true // 成功提交後,重置所有的表單元素的值.
//由於某種原因,提交陷入無限等待之中,timeout引數就是用來限制請求的時間,
//當請求大於3秒後,跳出請求.
//timeout: 3000
$('#myForm').submit(function() {
$(this).ajaxSubmit(options);
return false; //來阻止瀏覽器提交.
// 提交前
function showRequest() {
alert("beforeSubmit");
// 提交後
function showResponse() {
alert("success");
</script>
</head>
<form id="myForm" action="ajax.php" method="post">
名稱: <input type="text" name="name" /> <br />
地址: <input type="text" name="address" /><br />
自我介紹: <textarea name="comment"></textarea> <br />
<input type="submit" id="test" value="提交" /> <br />
<div id="output1"></div>
</form>
</body>
</html>
ajax.php
if(isset($_POST["name"])){
$vName = $_POST["name"];
echo $vName;
if(isset($_POST["address"])){
$vAddress = $_POST["address"];
echo $vAddress;
if(isset($_POST["comment"])){
$vComment = $_POST["comment"];
echo $vComment;
用
preventDefault
阻止預設行為
原生 javascript
document.querySelector('#myForm').addEventListener('submit', (e)=>{
e.preventDefault();
console.log('submit');
jquery
$('#myForm').submit((e)=>{
e.preventDefault();
console.log('submit');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script lanaguage='javascript'>
$(document).ready(function() {
var options = {
target: '#output1', // 用伺服器返回的資料 更新 id為output1的內容.
beforeSubmit: showRequest, // 提交前
success: showResponse, // 提交後
//Other:
//url: url // 預設是form的action,如果寫的話,會覆蓋from的action.
//type: type // 預設是form的method,如果寫的話,會覆蓋from的method.('get' or 'post').
//dataType: null // 'xml', 'script', or 'json' (接受服務端返回的型別.)
//clearForm: true // 成功提交後,清除所有的表單元素的值.
resetForm: true // 成功提交後,重置所有的表單元素的值.
//由於某種原因,提交陷入無限等待之中,timeout引數就是用來限制請求的時間,
//當請求大於3秒後,跳出請求.
//timeout: 3000
// $('#myForm').submit(function() {
// $(this).ajaxSubmit(options);
// return false; //來阻止瀏覽器提交.
// });
$('#myForm').submit((e)=>{
e.preventDefault();
console.log('submit');
$(this).ajaxSubmit(options);
return false; //來阻止瀏覽器提交.
// 提交前
function showRequest() {
alert("beforeSubmit");
// 提交後
function showResponse() {
alert("success");
</script>
</head>
<form id="myForm" action="b.php" method="post">
名稱: <input type="text" name="name" /> <br />
地址: <input type="text" name="address" /><br />
自我介紹: <textarea name="comment"></textarea> <br />
<input type="submit" id="test" value="提交" /> <br />
<div id="output1"></div>
</form>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script lanaguage='javascript'>
$(document).ready(function() {
var options = {
target: '#output1', // 用伺服器返回的資料 更新 id為output1的內容.
beforeSubmit: showRequest, // 提交前
success: showResponse, // 提交後
//Other:
//url: url // 預設是form的action,如果寫的話,會覆蓋from的action.
//type: type // 預設是form的method,如果寫的話,會覆蓋from的method.('get' or 'post').
//dataType: null // 'xml', 'script', or 'json' (接受服務端返回的型別.)
//clearForm: true // 成功提交後,清除所有的表單元素的值.
resetForm: true // 成功提交後,重置所有的表單元素的值.
//由於某種原因,提交陷入無限等待之中,timeout引數就是用來限制請求的時間,
//當請求大於3秒後,跳出請求.
//timeout: 3000
// $('#myForm').submit(function() {
// $(this).ajaxSubmit(options);
// return false; //來阻止瀏覽器提交.
// });
$('#myForm').submit((e)=>{
e.preventDefault();
console.log('submit');
$(this).ajaxSubmit(options);
return false; //來阻止瀏覽器提交.
// 提交前
function showRequest() {
alert("beforeSubmit");
// 提交後
function showResponse() {
alert("success");
</script>
</head>
<form id="myForm" action="b.php" method="post">
名稱: <input type="text" name="name" /> <br />
地址: <input type="text" name="address" /><br />
自我介紹: <textarea name="comment"></textarea> <br />
<input type="submit" id="test" value="提交" /> <br />
<div id="output1"></div>
</form>
</body>
</html>
這個JS檔案我這邊讀取不到:<script src="http://malsup.github.com/jquery.form.js"></script>
由於上述理由,我不知道 $(this).ajSubmit(options);
會不會有問題
提交表單後,你的 console 有顯示 submit 字串嗎?
如果有的話,問題不在 submit 的事件處理
而是 ajSubmit 這個 method 可能有問題
(因為讀不到檔案,沒法幫你看)