請勿在表單提交後刷新頁面

我試圖在不刷新頁面的情況下提交此表單。我使用jQuery;在提交頁面後仍然刷新。請勿在表單提交後刷新頁面

$(function(){ 
    $('#submit').click(function(){ 
    $('#container').append('loading'); 
     var sthis = $('#sthis').val(); 
     $.ajax({ 
     url: 'f.php' , 
     type: 'POST', 
     data: 'sthis: ' + sthis, 
     success: function(result){  
      $('#container').append('<p>' +  result + '</p>')  
     } 
     }); 
     return false;  
    }); 
});

html頁面（f.php）

<div id="container"> 
<form method="post" action="f.php"> 
something<input name="sthis" type="text" /> 
<input type="submit" value="submit" id="#submit" /> 
</form> 
</div>

PHP頁面

<?php 

if(isset($_POST['sthis'])){ 
    $sthis = $_POST['sthis']; 
    if(empty($sthis)) { echo 'put something in this box'; } 
    else echo 'ready'; 
} 

?>

來源

2011-11-23 user836910

你的問題是在這裏 ID = 「＃提交」應該是ID = 「提交」，應該工作。

來源

2011-11-24 00:20:58 user570782

謝謝這個作品，這麼小的錯誤。 – user836910

不會在收到ajax響應後重新載入f.php頁面，因爲action =「f.php」？ – Marconius

更改此：

<input type="submit" value="submit" id="#submit" />

要這樣：

<input type="button" value="submit" id="#submit" />

然後調用一個調用你的ajax函數的事件處理程序，而不是提交表單。

來源

2011-11-23 23:52:55

問題是如果用戶在輸入框中點擊「輸入」，他們仍然會觸發表單提交事件。 –

表示同意，如果表單提交，頁面將刷新，除此之外可能會導致該問題，但在文本字段中輸入 – Landon

在這種情況下最容易的事情就是改變你的表單標籤，像這樣：

<form method="post" action="f.php" onSubmit="return false;">

來源

2011-11-23 23:53:44

當我這樣做時表單什麼都不做，即使字段爲空 – user836910

其他必須是那麼繼續。它不應該對你的jQuery ajax代碼有任何影響。你得到一個JS錯誤？ –

在你的表單標籤

，只需添加一個onsubmit="return false"。這將阻止表單提交請求並刷新頁面。該按鈕上的點擊事件仍然有效，因此您可以通過javascript控制所有內容。下面是詳細信息：

http://www.htmlcodetutorial.com/forms/_FORM_onSubmit.html

來源

2011-11-23 23:54:50 Landon

當我做這個表單什麼也不做，即使這個字段是空的 – user836910

還有一些問題。

第一：在f.php：

<input name="sthis" type="text" />

將其更改爲：

<input id="sthis" type="text" />

二：在阿賈克斯的數據格式是錯誤的：

data: 'sthis: ' + sthis,

將其更改爲：

data: {sthis: sthis},

來源

2012-07-17 01:54:42 user1196630

請勿在表單提交後刷新頁面

回答

相關問題