Question

HTML：

<body>
<form name='sample' id='sample' method='GET' action='followedbutton.php'>
Name:<input type='text' name='username' id='username'><br>
Age:<input type='text' name='userage' id='userage'><br>
Date:<input type='text' name='userdate' id='userdate'><br>
<input type='submit' name='submit' id='submit' value='Go!'>
</form>
</body>

JS：

<script>
$(document).ready(function () {
    var $form = $('#sample');
    $form.submit(function (e) {
        $.GET(url: $(form).attr('action'), data: $(form).serialize(), success: function (result) {
            $('#div').html(result)
        }, 'json');
        return false;
        e.preventDefault();
    });
});
</script>

PHP成功页面：

<?php
error_reporting(E_ALL); ini_set('display_errors', 1); mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);    
$conn = mysqli_connect('localhost', 'root', '') or die ("No mysqli");
        mysqli_select_db($conn, 'sample') or die ("No DB");
$name = $_GET['username'];
$age = $_GET['userage'];
$date = $_GET['userdate'];
$insert = ("INSERT INTO `test` (name, age, date) VALUES ('$name','$age','$date')");
$insert_query = mysqli_query($conn, $insert) or die ("No query");
mysqli_close($conn);
//header('location:followbutton.php');
echo "<script text='javascript'>alert('Ajax');</script>"
 ?>

所以我尝试提交此表单而不刷新页面。当我提交表单时，我会立即收到警报，而不会刷新页面。但是在我的Chrome标签中，我可以看到页面仍在加载，最终（大约5-7秒左右）页面转到followedbutton.php。

如何在保持我的信息转到followedbutton.php的同时阻止页面刷新？我的JS代码需要改变什么？一切正常，我只是想要页面刷新。

我已经从其他用户那里得到了一些建议，他们提出了类似的问题，但这些建议都没有对我有用。

我已将此帖子的建议改为：

<script>
$(document).ready(function(){
var $form = $('#sample');
$form.submit(function(e){
e.preventDefault();
$.get( url:$(form).attr('action'), data:$(form).serialize(), success:function(result)  {$('#div').html(result)},'json'); 
  return false;
});
});
</script>

但遗憾的是仍然得到了相同的结果。遗憾的是，我还没有学习如何使用我的JS控制台进行调试。它列在要做的事情列表中。

Answer 1

$.GET没有$.get这样的事情。它区分大小写。因此，您的代码在阻止默认行为之前就会爆炸，因此它正在提交。修复后，您还会发现使用get错误。

总是检查你的js控制台，它会告诉你这是问题。

正确拨打get：

$.get($(form).attr('action'), 
      $(form).serialize(), 
      function (result) {
            $('#div').html(result)
      }, 
      'json');

Answer 2

e.preventDefault()永远不会在您之前return得到评估：

function(e) {
  // ...
  return false;
  e.preventDefault(); // <-- never happens
}

您调用$.GET的方式也存在问题（正如其他人指出的那样，$.get）。看起来您尝试将设置对象传递给$.get，就像$.ajax一样，但是您的代码有两个问题：

您省略了对象周围的花括号（foo(bar: 1)无效的JavaScript; foo({ bar: 1 })是），这将导致语法错误。
即使你修正了它不会起作用，因为与$.ajax不同，$.get没有设置对象; url，data，success和dataType需要四个不同的参数。

你真正想要的是：

$.get( $(form).attr('action'),  // url
       $(form).serialize(),     // data
       function (result) {      // success
         $('#div').html(result)
       },
       'json'                   // dataType
);

页面仍然使用ajax刷新

2 个答案: