jQuery Ajax Post具有来自表单的主体值和打印响应

时间:2019-08-28 05:45:11

标签: javascript json ajax

我有一个ajax请求,将数据发布到api并获得响应。我想做的是,如何将值从输入字段传递到ajax上的正文数据。

这里是我的表单

<input type="text" name="serial" />
<input type="submit" />

此处是我的ajax请求

$.ajax({ url: "http://www.example.com/api",
 beforeSend: function(xhr)
 { xhr.setRequestHeader("Authorization", "Basic " + btoa("username:password")); }, 
type: 'POST', 
dataType: 'json', 
contentType: 'application/json', 
processData: false, 
data: '{"serial":"252625"}', 
success: function (data) { alert(JSON.stringify(data)); }, 
error: function(){ 
alert("Cannot get data"); } 
});

我想通过编程输入的串行输入来制作这部分data: '{"serial":"252625"}'

感谢任何建议,

1 个答案:

答案 0 :(得分:0)

您的表单:

<input type="text" name="serial" id="serial" />
<input type="submit" id="submit" />

带有Jquery的Javascript

$(document).ready(function() {
    $('#submit').click(function() {
        $.ajax({
            url: "http://www.example.com/api",
            beforeSend: function(xhr) {
                xhr.setRequestHeader("Authorization", "Basic " + btoa("username:password"));
            }, 
            type: 'POST', 
            dataType: 'json', 
            contentType: 'application/json', 
            processData: false,

            data: {
                serial: $('#serial').val()
            }, 

            success: function (data) {
                alert(JSON.stringify(data));
            }, 
            error: function(error){ 
                alert("Cannot get data");
                console.log(error);
            } 
        });
    });
});