Блог

Главная - Вопросы по программированию - AJAX-вызов PHP-файла не работает

AJAX-вызов PHP-файла не работает

#php #jquery #ajax #json

#php #jquery #ajax #json

Вопрос:

Я практикуюсь в выполнении простых вызовов AJAX для localhost, но испытываю проблемы. Что я пытаюсь сделать, это отправить два значения формы текстового поля в PHP, а затем заставить его вернуть сообщение в пустой div в моей форме после успешного приема через AJAX. Мой test.php похоже на это:

 <?php

$num = htmlentities(substr($_POST["num"], 0, 7), ENT_QUOTES);
$name = htmlentities(substr($_POST["name"], 0, 50), ENT_QUOTES);

$result = "'$num '   'and'   ' $name'   ' values have been successfully AJAXd'";

echo json_encode($result);

jQuery:

   $("#form").submit(function() {
    event.preventDefault();
    $("#msgcontainer").html("");
    $.ajax({
    url: "test.php",
    data: ("#num").serialize(), ("#name").serialize(),
    contentType: "application/json; charset=utf-8",
    type: "POST",   
    dataType: "json"
      success: function(response) {
        $("#msgcontainer").html(response);
      }
    });
  }

Когда я пытаюсь отправить, страница просто перезагружается и добавляет значения формы к URL. Я пытаюсь решить эту проблему уже около дня, поэтому буду признателен за любую помощь.

Редактировать:

Я понял это, попробовав что-то из каждого ответа. Не уверен, почему это работает без сериализации… Если кто-то знает, пожалуйста, объясните. Рабочий код jQuery:

   $("#form").submit(function(event) {
    event.preventDefault();
    $("#msgcontainer").html("");
    $.ajax({
    url: "test.php",
    data: {
            num: $("#num").val(),
            name: $("#name").val()
          },
    type: "POST",
    dataType: "json",
      success: function(response) {
        $("#msgcontainer").html(response);
      }
    });
  });

Спасибо за помощь!

Комментарии:

1. $result = "{$num} and {$name} values have been successfully AJAXd"; был бы правильный формат

2. Не могли бы вы также поделиться HTML-кодом? Кстати, вы должны были видеть ошибки синтаксического анализа в консоли JavaScript.

Ответ №1:

Сразу бросаются в глаза две вещи:

 data: ("#num").serialize(), ("#name").serialize(),
contentType: "application/json; charset=utf-8",

Первым должно быть это (при условии, что у вас есть два текстовых поля):

 data: {
    num: $('#num').val(),
    name: $('#name').val()
},

И contentType: строки там не должно быть, иначе у вас будет пустая $_POST .

Наконец, event должен быть аргумент функции, т.е.:

 $("#form").submit(function(event) {
    event.preventDefault();
    // ...

Комментарии:

1. Это работает, но почему это работает без сериализации?

2. @user3361043 Когда вы передаете простой объект как data: jQuery выполнит сериализацию за вас.

3. Я вижу. Итак, когда это необходимо?

4. Вы можете использовать $(this).serialize() для получения строки, которую затем можно передать с помощью data: ; это удобно, когда у вас есть несколько полей ввода и вам не требуется специальная обработка значений.

Ответ №2:

Ваш параметр данных в вашем вызове AJAX неверен, должно быть что-то вроде:

 data: { num: $('#num').val() , name: $('#name').val() }

Ответ №3:

 $("#form").submit(function() {
  event.preventDefault();

event нигде не определено. Я предполагаю, что вы имели в виду ...submit(function(event) { .

Вы должны видеть ошибку в консоли JavaScript, сообщающую вам «событие не определено» или «TypeError: не удается прочитать свойство ‘preventDefault’ из undefined».

Ответ №4:

доброе утро,

Вы должны сериализовать всю форму, например:

 $("#yourform").serialize();

Вместо того, чтобы просто по полю:

 ("#num").serialize(), ("#name").serialize()

Ответ №5:

Данные не отправляются должным образом. Рассмотрите возможность замены:

 data: ("#num").serialize(), ("#name").serialize(),

С:

 data: $(this).serialize(),

И затем вы можете отредактировать свой PHP скрипт так, чтобы вы concatenate использовали строки вместо summing них.

Также передайте event параметр или просто используйте следующее:

 $("#form").submit(function() {
    var event = arguments[0];
    event.preventDefault();
    ....
});

Я сомневаюсь, что вам нужно contentType: "application/json; charset=utf-8", !