Question

我正在尝试提交此表单而不刷新页面。我正在使用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 page（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';
}

?>

Answer 1

改变这个：

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

对此：

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

然后挂钩一个调用你的ajax函数的事件处理程序，而不是提交表单。

Answer 2

你的问题就在这里 id =“＃submit”应该是id =“submit”，这应该有效。

Answer 3

在这种情况下，最简单的方法是更改表单标记，如下所示：

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

Answer 4

在您的表单标记中，只需添加onsubmit="return false"即可。这将阻止表单提交请求并刷新页面。该按钮上的点击事件仍然有效，因此您可以通过javascript控制所有内容。以下是更多信息：

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

Answer 5

还有一些问题。

首先：在f.php中：

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

将其更改为：

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

第二：.ajax中的数据格式错误：

  data: 'sthis: ' + sthis,

将其更改为：

 data: {sthis: sthis},

表单提交时不刷新页面

5 个答案: