请勿在表单提交后刷新页面

我试图在不刷新页面的情况下提交此表单。我使用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

请勿在表单提交后刷新页面

回答

相关问题