Заменить части объекта JSON на входные значения HTML

Question

Я недавно протестировал МНОЖЕСТВО другого синтаксиса для отправки пост-запроса ajax, и единственный, который действительно работал, был тот, который я получил от моего тестирования Почтальона. Единственная проблема, с которой я столкнулся, это то, что фрагмент кода Почтальона «жестко закодирован» и имеет странный синтаксис строки, которого я никогда раньше не видел. Я хочу заменить части этой странной строки значениями из входных данных HTML. Есть идеи, как мне этого добиться?

У меня есть два простых ввода HTML:

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

А вот часть, которую я получил от Почтальона (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);
    });

В частности, часть, о которой я спрашиваю, это строка «data». Я хочу иметь возможность взять значения из двух входов 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

Мне интересно, как поместить мои переменные в строку, используя valid Синтаксис

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

Answer 2

Для форматирования данных в формате 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"/>

Answer 3

Я предлагаю использовать 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);
});