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

<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></pre>
</div>

如果请求成功，则响应为：

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

但在我的代码中，响应总是返回错误

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

这意味着body值没有被填满，到目前为止我的代码有什么问题

任何帮助将不胜感激，

Answer 1

删除dataType: 'text'，因为 jQuery 可以智能地猜测响应中的预期内容（xml、json、脚本或 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 );
        }
    });
 });