Данные формы POST с данными jQuery

Question

У меня есть рабочий запрос, который я создал в Postman. В этом запросе я отправляю данные в конечную точку по адресу http://localhost:21124/submissions/[someId]. В Postman у меня есть заголовок, который называется Content-Type со значением application/x-www-form-urlencoded.

На вкладке «Тело» в почтовом отправлении есть переключатель x-www-form-urlencoded. Затем я ввожу несколько пар ключ-значение. Когда я отправляю этот запрос, он работает успешно. Теперь я пытаюсь перестроить этот запрос как HTML-форму.

В попытке восстановить запрос как HTML-формы, у меня есть:

 function submitClick() { 
 
     var form = $('#myForm'); 
 
     $.ajax({ 
 
      url: '/submissions/2e5f7619-23a5-425c-a39c-97928e3c2f9a', 
 
      data: form.serialize(), 
 
      type: 'POST' 
 
     }); 
 
    
 
     return false; 
 
     } 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="myForm" method="post"> 
 
     <label for="emailAddress">Email address</label> 
 
     <input type="email" id="emailAddress"> 
 
     
 
     <label for="name">Name</label> 
 
     <input type="text" id="name"> 
 
    
 
     <button onclick="return submitClick();">Submit</button> 
 
    </form>

Когда я нажимаю кнопку «Отправить», я не вижу, мои ценности в моем контроллер. Я могу успешно их видеть, когда отправляю почту через Почтальон. Это будет означать, что значения получают POSTed двумя разными способами. Однако я не знаю, почему. Может кто-нибудь, пожалуйста, объясните мне разницу?

Благодаря

Answer 1

Ваши элементы формы не имеют «имя» атрибуты. Это необходимо для того, чтобы элемент был сериализован jQuery и отправлен в данные запроса.

Кроме того, вы могли бы сделать сценарий немного аккуратнее с помощью синтаксиса JQuery, чтобы справиться с формой-х submit событие непосредственно:

Script

$('#myForm').submit(function(event) { 
    event.preventDefault(); //prevent a (default) full postback 

    $.ajax({ 
    url: '/submissions/2e5f7619-23a5-425c-a39c-97928e3c2f9a', 
    data: $(this).serialize(), 
    type: 'POST' 
    }); 
}); 

HTML

Вы гаванью» t показан код контроллера, поэтому, для примера, я буду предполагать имена полей, которые сервер ожидает получать соответствуют атрибутам идентификатора элементов формы. Однако вам нужно будет убедиться, что они соответствуют ожидаемому контроллеру, чтобы контроллер мог их распознать.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form id="myForm" method="post"> 
    <label for="emailAddress">Email address</label> 
    <input type="email" id="emailAddress" name="emailAddress"> 
    <label for="name">Name</label> 
    <input type="text" id="name" name="name"> 
    <button type="submit" id="submitMyForm" name="submitMyForm" >Submit</button> 
</form>