用HTML輸入值替換JSON對象的一部分

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"/>