Question

我最近测试了很多用于发送ajax发布请求的不同语法，而唯一有效的方法是我从Postman测试中获得的请求。我现在唯一的问题是邮递员代码段是“硬编码的”，并且具有我从未见过的奇怪的字符串语法。我想用HTML输入中的值替换该奇怪字符串的一部分。有什么想法可以实现吗？

我有两个简单的HTML输入：

<input type="text" id="username" name="username" placeholder="Username" autofocus /> 
<input type="password" id="password" name="password" placeholder="Password" />

这是我从Postman（JavaScript）获得的部分：

var settings = {
        "async": true,
        "crossDomain": true,
        "url": "...",
        "method": "POST",
        "headers": {
        "Content-Type": "application/json",
        "cache-control": "no-cache"
        },
            "processData": false,
            "data": "{  \r\n\"Username\":\"username123\",\r\n\"Password\":\"password123\"\r\n}"
        }
$.ajax(settings).done(function(response) {
    console.log(response);
    });

具体来说，我要问的部分是“数据”行。我希望能够从两个HTML输入中获取值，并分别用它们替换“ username123”和“ password123”。我尝试过处理数据字符串，例如删除\ r \ n和一些“和\”，但是随后从尝试调用的API中收到错误消息。我真的需要所有这些吗？ 我想知道如何使用有效的语法将变量放入字符串中，而不是如何获取值，例如：

var usname = document.getElementById("username").val();

或

var usname = $('#username').val();

这些JSON语法经过测试并收到错误：

"data": {"Username": "username123","Password": "password123"}
"data": "{"Username": "username123", "Password": "password123"}"
"data": {"Username": usname, "Password": pword}
"data": {"Username": $('username').val(), "Password": $('password').val()}

我觉得至少第一个应该可以工作，但它只会返回错误500。作为参考，以下是正文（数据）在Postman（工作）中的样子：

{  
"Username":"username123",
"Password":"password123"
}

这可能是空格问题吗？很遗憾，我无法访问正在调用的API的源代码。

Answer 1

我建议使用FormData包装要发送的数据：

var formData = new FormData();
formData.append('Username', $("#username").val());
formData.append('Password', $("#password").val());

然后，您像这样调用ajax post：

var settings = {
    "async": true,
    "crossDomain": true,
    "url": "...",
    "method": "POST",
    "contentType": 'application/x-www-form-urlencoded',
    "processData": false,
    "data": formData
};

$.ajax(settings).done(function(response)
{
    console.log(response);
});

如果您需要以JSON的形式发送数据，则可以尝试下一个代码：

var data = {};
data.Username = $("#username").val();
data.Password = $("#password").val();

var settings = {
    "async": true,
    "crossDomain": true,
    "url": "...",
    "method": "POST",
    "headers": {
        "Content-Type": "application/json",
        "cache-control": "no-cache"
    },
    "processData": false,
    "data": JSON.stringify(data)
};

$.ajax(settings).done(function(response)
{
    console.log(response);
});

Answer 2

我想知道如何使用有效变量将我的变量放入字符串中语法

settings.data = settings.data.replace("username123", usname);
settings.data = settings.data.replace("password123", uspassword);

Answer 3

用于将数据格式化为JSON并能够将其属性用于不同目的：

var settings = {
            "async": true,
            "crossDomain": true,
            "url": "...",
            "method": "POST",
            "headers": {
            "Content-Type": "application/json",
            "cache-control": "no-cache"
            },
                "processData": false,
                "data": "{  \r\n\"Username\":\"username123\",\r\n\"Password\":\"password123\"\r\n}"
            };

    //remove line breaks
    settings.data = settings.data.replace('/\r?\n|\r/', '');

    //convert to properties
    settings.data = JSON.parse(settings.data);

    //re-assign properties as needed
    settings.data.Username = 'newUsername';
    settings.data.Password = document.getElementById('password').value;

    console.log(settings.data);

<input type="password" id="password" name="password" placeholder="Password" value="newPassword"/>

用HTML输入值替换JSON对象的一部分

3 个答案: