Блог

Главная - Вопросы по программированию - Печать ответа в формате JSON

Печать ответа в формате JSON

#json #ajax

#json #ajax

Вопрос:

У меня есть скрипт запроса ajax с методом post, использующим значение тела, чего я хочу, так это напечатать значение ответа.

  $('#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: { "firstname": $('#firstname').val(), "lastname": $('#lastname').val() },
        success: function( data, textStatus, jQxhr ){
            $('#response pre').html( JSON.stringify( data ) );
        },
        error: function( jqXhr, textStatus, errorThrown ){
            console.log( errorThrown );
        }
    });
 });

и сценарий формы является:

 <form id='my-form'>
    <div><input type='text' name='firstname' id='firstname' placeholder='Firstname' /></div>
    <div><input type='text' name='lastname' id='lastname' placeholder='Lastname' /></div>
    <div><input type='submit' value='Submit' /></div>
</form>

<!-- where the response will be displayed -->
    <div id="response">
    <pre></pre>
</div>

но на экране ничего не отображается, кто-нибудь знает почему?

Спасибо

Комментарии:

1. <pre> Внутри вашего #response div нет, поэтому $('#response pre') обновлять нечего.

2. Я добавил, но по-прежнему ничего не появляется

3. Что произойдет, если console.log(data); внутри success обратного вызова? Что-нибудь регистрируется в консоли?

4. Привет @phuzi, пробовал, но на консоли тоже ничего не отображается. Но если бы я удалил $ (‘#my-form’).submit(функция () { в журнале консоли отображаются нулевые данные

5. Вы уверены, что вызов AJAX выполняется успешно? Если да, уверены ли вы, что существует ответ в формате JSON?

Ответ №1:

Как сказал Рой, вам нужно запретить браузеру отправлять форму. Вам нужно будет предотвратить запуск события по умолчанию при обработке его с помощью AJAX-запроса.

 $('#my-form').submit(function (event) {
    event.preventDefault();
    $.ajax({
        url: 'https://apiurl.com/users',
...