Я использую jQuery для AJAX POST формы и не хочу, чтобы страница обновлялась. Я добавил команду возврата 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;
        });
    });
}
0
chocolatecoco 30 Авг 2017 в 13:41

5 ответов

Лучший ответ

Все комментарии в конечном итоге сделали решение клик.

Основные пункты обучения:

  1. Не оборачивайте элементы формы в тег. Мне нужно выяснить, нарушает ли это веб-стандарты и что происходит, когда 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()">
0
chocolatecoco 30 Авг 2017 в 13:02

У вас есть три способа сделать это.

Первый путь Остановите 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()">

Третий путь Добавьте возвращаемое значение 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">
1
Matteo Gaggiano 30 Авг 2017 в 13:43

Это обновляет страницу, потому что вы отправляете форму.

если вы хотите сделать AJAX-Call, вам не нужно отправлять форму.

Просто измените свой код, как показано ниже:

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)

1
Vural 30 Авг 2017 в 12:37

Вам нужно изменить button type

<input class="btntick" type="button" name="fbackresponse" value="Positive" onclick="submitdata()">
<input class="btncross" type="button" name="fbackresponse" value="Negative" onclick="submitdata()">
0
Mayank Vadiya 30 Авг 2017 в 10:44

Возврат должен быть за пределами готового обратного вызова. Поэтому submitdata должен возвращать false, чтобы остановить submit-событие.

Изменение типа кнопок не решит проблему, когда пользователь нажимает ввод внутри поля ввода.

0
Norkos 30 Авг 2017 в 10:47