javascript - 使用 return false 会阻止我的 AJAX 调用执行，删除它可以修复它，但页面会刷新

Question

我正在使用 jQuery 来 AJAX POST 表单，并且不希望页面刷新。我添加了 return false 命令，该命令阻止页面刷新，但 AJAX POST 不会发生。如果我删除 return false 命令，我的 AJAX POST 会成功，但页面会刷新。我做错了什么？

PHP 代码:

<form name="frmfeedback" id="frmfeedback" method="POST">
    <label>This answer was helpful</label>
    <input class="test" type="text" name="test" value=""/>
    <input class="hidden" id="fbackqueryval" type="text" name="fbackqueryval" value="1"/>
    <input class="btntick" type="submit" name="fbackresponse" value="Positive" onclick="submitdata()">
    <input class="btncross" type="submit" name="fbackresponse" value="Negative" onclick="submitdata()">
</form>

JS代码:

function submitdata()
{
    $('#frmfeedback').on('click', function(e){
        e.preventDefault();
        $.ajax({
            method: "POST",
            url: "/",
            data: { fbackqueryval: "1"}
        }).done(function( msg ) {
            alert( "Data Saved" );
            return false;
        });
    });
}

Answer 1

正在刷新页面，因为您正在提交表单。

if you want to make an AJAX-Call, you do not need to submit a form.

只需更改您的代码，如下所示:

JQuery:

  $('.myAjaxButton').on('click', function(e){
     e.preventDefault();

      $.ajax({
        method: "POST",
        url: "/myAjax.php",
        data: { fbackqueryval: "1"}
      })
      .done(function( msg ) {
          alert( "Data Saved" );
      });
  });

和 html:

    <label>This answer was helpful</label>
    <button class="btntick myAjaxButton">Positive</button>
    <button class="btncross myAjaxButton">Negative</button>

您可以查看:https://jsfiddle.net/32dLa1wh/

如果它不适合您，您应该调试您的 php 文件(例如 myAjax.php)