使用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

您有三种方法可以做到这一点。

第一种方式，停止submitdata返回false（将其从done回调中删除）

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

第二种方式将类型按钮更改为type=button而不是type=submit

<input class="btntick" type="button" name="fbackresponse" value="Positive" onclick="submitdata()">
<input class="btncross" type="button" name="fbackresponse" value="Negative" onclick="submitdata()">

第三种方式，将return false添加到onClick属性：

<input class="btntick" type="submit" name="fbackresponse" value="Positive" onclick="submitdata();return false;">
<input class="btncross" type="submit" name="fbackresponse" value="Negative" onclick="submitdata();return false;">

正如其他人所提到的，您正在拨打路线/

您可以按照以下方式进行操作：

$(document).ready(function() {
    $('input[type=button][name=fbackresponse]').on('click', function(e) {
        fbackqueryval = $(this).val();
        $.ajax({
            method: "POST",
            url: "/",
            data: {
                fbackqueryval: fbackqueryval
            }
        })
        .done(function(msg) {
            alert("Data Saved");
        });
    });
});

<input class="btntick" type="button" name="fbackresponse" value="1">
<input class="btncross" type="button" name="fbackresponse" value="-1">

Answer 2

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

如果您要拨打AJAX电话，则无需提交表格。

只需如下更改代码：

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）

Answer 3

您需要更改button type

<input class="btntick" type="button" name="fbackresponse" value="Positive" onclick="submitdata()">
<input class="btncross" type="button" name="fbackresponse" value="Negative" onclick="submitdata()">

Answer 4

返回必须在完成回调之外。 因此submitdata必须返回false以停止submit-event。

当用户在输入字段中按Enter键时，更改按钮的类型不会解决问题。

Answer 5

所有注释的总和最终使解决方案单击。

主要学习点是：

1. 不要将表单元素包装在标签中。 我将不得不研究这是否违反了Web标准以及当JS不可用时会发生什么，但是就我要构建的目的而言，这已经足够了
2. 因为代码建议从根本上改变了我将数据发布回服务器的方式和方式，所以这意味着我必须调整PHP代码以处理传入的数据。 它对我不起作用的原因是因为我正在寻找不再发送的POST值。

我还没有弄清楚如何创建一个函数来处理两个不同的按钮，所以我有两个链接到两个按钮的函数：fbackPositive（）和fbackNegative（）。

JS代码：

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

  return false;
}

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

  return false;
}

HTML：

<input class="" id="fbackqueryval" type="text" name="fbackqueryval" value="1"/>
<button class="btntick" type="button" name="fbackresponse" value="Positive" onclick="fbackPositive()">
<button class="btncross" type="button" name="fbackresponse" value="Negative" onclick="fbackNegative()">