JQuery AJAX POST Форма

Question

Я пытался разобрать значение формы в переменную данных для запроса тела, но тело всегда возвращает пустое. Это означает, что мой скрипт не работает для печати типа значения поля пользователем в данные тела. в HTML-форме:

<form id="my-form">
    <input type="text" id="MSISDN" name="MSISDN" placeholder="MSISDN"/>
    <input type="text" id="channel" name="channel" placeholder="channel"/>

    <button type="submit">Submit</button>
</form>

Вот мой JavaScript

<code><script>
$.ajax({
    url: 'https://apiurl.com/users',
    dataType: 'text',
    type: 'post',
    headers: {
    'accept': 'application/json;charset=UTF8',
    'content-type': 'application/json',
    'api-key': 'judmkd895849438'
  },
    contentType: 'application/json',


    data: JSON.stringify( { "MSISDN": $('#MSISDN').val(), "channel": $('0').val() } ),
    //data: JSON.stringify( {MSISDN: document.getElementById("MSISDN").value, channel: "0"} ),


    processData: false,
    success: function( data, textStatus, jQxhr ){
        $('#response pre').html( JSON.stringify( data ) );
    },
    error: function( jqXhr, textStatus, errorThrown ){
        console.log( errorThrown );
    }
});
</script>
<div id="response">
    <pre>

Если запрос успешен, ответом будет:

{
    "UserDetails": [
        {
            "status": "Enabled",
            "UserID": "ABCS884784",
            "UserNo": "897363762827"
        }
    ],
    "customerStatus": null,
    "responseCode": 0,
    "responseMessage": "Details Fetched Successfully "
}

но в моем коде ответ всегда возвращает ошибку

"{\"customerStatus\":null,\"responseCode\":-2,\"responseMessage\":\"Inputs are invalid.\"}" 

это означает, что значение тела не заполняется, пока не могу понять, что не так с моим кодом

Любая помощь оценят,

Answer 1

Удалить dataType: 'text', поскольку jQuery разумно угадывает, что (xml, json, script или html) ожидать в ответе.Также удалите processData: false, поскольку вы не отправляете DOMDocument или другие необработанные данные.

$('#my-form').submit(function () {
    var formData = {
         MSISDN : $('#MSISDN').val(),
         channel : $('#channel').val()
    };
    $.ajax({
        url: 'https://apiurl.com/users',
        type: 'post',
        headers: {
        'accept': 'application/json;charset=UTF8',
        'content-type': 'application/json',
        'api-key': 'judmkd895849438'
      },
        contentType: 'application/json',
        data: JSON.stringify(formData),
        success: function( data, textStatus, jQxhr ){
            console.log(data);
            $('#response pre').html( JSON.stringify( data ) );
        },
        error: function( jqXhr, textStatus, errorThrown ){
            console.log( errorThrown );
        }
    });
 });

Answer 2

Вы вызываете ajax сразу после загрузки, но вам нужно позвонить при подаче, попробуйте это.

  $('#my-form').submit(function () {
    $.ajax({
        url: 'https://apiurl.com/users',
        type: 'post',
        headers: {
        'accept': 'application/json;charset=UTF8',
        'content-type': 'application/json',
        'api-key': 'judmkd895849438'
      },
        contentType: 'application/json',
        data: { "MSISDN": $('#MSISDN').val(), "channel": $('#channel').val() },
        success: function( data, textStatus, jQxhr ){
            $('#response pre').html( JSON.stringify( data ) );
        },
        error: function( jqXhr, textStatus, errorThrown ){
            console.log( errorThrown );
        }
    });
 });