Отправка формы через Post-запрос jQuery Ajax

ProgramBox

Отправка формы через Post-запрос jQuery Ajax

Post author:admin
Запись опубликована:1 марта, 2023
Post category:Вопросы по программированию

#javascript #jquery #ajax #express #form-data

#javascript #jquery #ajax #экспресс #форма-данные

Вопрос:

У меня есть базовая служба обмена сообщениями на веб-узле / экспресс-веб-приложении, и я пытаюсь отправить форму через Ajax, используя объект FormData.

Если я отправляю форму без AJAX, то все работает нормально, но с AJAX req.body. все они не определены.

На сервере мне нужно искать данные где-то, кроме req.body, при использовании AJAX??

Создание объекта FormData:

 var ajaxData = new FormData;
ajaxData.append('newMessage', $('.new-message').val()) // I've console.logged these, and their values are correct
ajaxData.append('senderId', $('[name="senderId"]').val())
ajaxData.append('senderName', $('[name="senderName"]').val())// I've console.logged these, and their values are correct
ajaxData.append('recipientId', $('[name="recipientId"]').val())
ajaxData.append('recipientName', $('[name="recipientName"]').val())// I've console.logged these, and their values are correct

И это POST-запрос:

 $.ajax({
  url: $form.attr('action'),
  type: $form.attr('method'),
  data: ajaxData,
  dataType: false,
  cache: false,
  contentType: false,
  processData: false,
  complete: function() {
    console.log('message created');
  },
  success: function(data) {


  },
  error: function(xhr, textStatus, errorThrown) {
    console.log(xhr.statusText);
    console.log(textStatus);
    console.log(errorThrown);
  }
});

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

Спасибо Г. Мансуру за его ответы ниже. На случай, если кто-то еще попадет сюда, проблема заключалась в строке:

 contentType: false,

В какой-то момент я попробовал эту строку, которая также не работает

 contentType: 'application/json',

Но когда я полностью удаляю строку, все работает как обычно… Если кто-нибудь может сказать мне, почему эта строка все нарушала, мне было бы интересно узнать.

1. задействованы ли файлы? Если не намного проще просто сериализовать форму и избавиться от созданных вами пользовательских настроек

2. Спасибо за комментарий @charlietfl Нет, никаких файлов не задействовано. Я только что попробовал сериализовать форму, как предложил G. Mansour ниже, но я получаю a parseerror с неожиданным токеном в позиции 0.

3. проверьте фактический запрос в сети инструментов разработчика браузера .. можете увидеть, что возвращается. Это недопустимый json

4. Да, ответ, который я получаю, — это HTML страницы, что мне не очень помогает. Я ввел точку останова XHR, чтобы посмотреть, что это показало, и это просто дало мне объект FormData. Я искал в нем строку сообщения, которую я отправил, но ее там не было…

5. ну, зависит от того, как вы анализируете тело … если вы ищете json для отправки, вам нужно изменить ajax или отправить сообщение

Ответ №1:

Это часть html

 <form id="form" action="" method="post">
<input type="text" name="msgID" id="msgID">
<input type="text" name="senderId" id="senderId">
<input type="text" name="senderName" id="senderName">
<input type="text" name="recipientId" id="recipientId">
<input type="text" name="recipientName" id="recipientName">
<input type="submit" name="dsq" value="dsqdsq">
</form>

это часть JavaScript

 <script type="text/javascript">

$(document).ready(function(){
$("#form").submit(function(){
    $.ajax({
        url: "test.php", 
        data: $("#form").serialize(), 
        type: "POST", 
        dataType: 'json',
        success: function (e) {
            console.log(JSON.stringify(e));


        },
        error:function(e){
            console.log(JSON.stringify(e));


        }
    }); 
    return false;
});
});

</script>

И это php-код

 <?php 
die(json_encode(array("status"=>true)));
?>

Надеюсь, это вам поможет.

Ответ №2:

Я проверил ваш код, в нем говорится, что

Незаконный вызов

Итак, я дам решение, которое вы можете использовать

 data: $form.serialize(),
dataType: 'json',

И затем вы можете получить возвращенный результат с помощью

 console.log(JSON.stringify(e));

Жаль, что это помогает. Если у вас есть какие-то ошибки, я могу вам помочь.

1. Спасибо @G. Мансур! Я только что попробовал, как вы предложили, но я получаю parseerror сообщение, что в позиции 0 есть неожиданный символ. Я забыл упомянуть в своем первоначальном сообщении, что я сначала попытался настроить FormData($form) , но я получал те же результаты.

2. Можете ли вы изменить функцию ошибки на эту ошибку: function(error) { console.log(JSON.stringify(ошибка)); }

3. Я изменил обработку ошибок, но я не получаю никаких ошибок. Все, что происходит, это то, что я создаю пустой документ сообщения в MongoDB.

4. Попробуйте изменить действие вашей формы на другой пустой файл с простым возвратом, например true или false, и посмотрите, что произойдет, тогда я отправлю вам пример отправки форм с помощью ajax

5. Изменить действие? Что вы имеете в виду, измените URL-адрес сообщения?