jQuery AJAX POST表单

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (383)

我试图将表单值解析为body请求的数据变量,但是body总是返回空。这意味着我的脚本无法按用户将字段值类型打印到正文数据中。在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.\"}" 

这意味着主体值没有填满,到目前为止我的代码不能错

任何帮助将不胜感激,

提问于
用户回答回答于

你在加载后立即调用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 );
        }
    });
 });
用户回答回答于

删除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 );
        }
    });
 });

扫码关注云+社区

领取腾讯云代金券