Отправить Json через форму Отправить с помощью jQuery

0

HTML

<form id="join">
<div class="content">
    <h2>Join the Dodilio Exchange</h2>
    <ul>
        <li><input id="firstname" type="text" placeholder="Fast Name" name="firstname" required></li>
    </ul>
 </div>
 </form>

JS

    var register = function (firstname) {

        var obj = {
            "firstname": firstname
        }

        $.ajax({
            type: "POST",
            dataType: 'json',
            data: obj,
            url: "/rest/register/?format=json",
            success: function (data) {
                console.log('success')
                //window.location.href = '/ideas'
            }
        });
    }


    var joinForm = $('#join');
    var firstname = $('#firstname').val()

    joinForm.submit(function(e){
        console.log('submit')
        e.preventDefault();

        register(firstname)


        return false;
    })

НО это Проводка традиционной формы:

POST http://127.0.0.1:8000/rest/register/?format=json HTTP/1.1
Host: 127.0.0.1:8000
Connection: keep-alive
Content-Length: 233
Accept: application/json, text/javascript, */*; q=0.01
Origin: http://127.0.0.1:8000
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/34.0.1847.131 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://127.0.0.1:8000/jointheexchange.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

firstname=&lastname=&

Я не очень силен с jQuery, и я рассмотрел несколько примеров этого в Интернете и стеке, и, честно говоря, я не вижу, что я делаю неправильно/по-другому. PLease help - спасибо.

  • 1
    Связан ли обработчик отправки? Появляется ли «submit» в консоли? Если нет, тогда используйте обработчик готовых документов или установите код, как только FORM станет доступным в DOM
  • 0
    Да. Спасибо, что подсказали эту информацию. Я застрял, но не для того, чтобы не пытаться, и, честно говоря, этот случай меня смущает.
Показать ещё 7 комментариев
Теги:

2 ответа

0
Лучший ответ

Я считаю, что вам нужно подкрепить свой объект JSON.

var dataToSend = JSON.stringify(obj);

Затем, я полагаю, вам нужно обновить свой метод ajax, чтобы указать тип содержимого: json:

$.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            data: dataToSend,
            url: "/rest/register/?format=json",
            success: function (data) {
                console.log('success')
                //window.location.href = '/ideas'
            }
        });

Я сделал скрипку и, похоже, работает, если у вас работает скрипач, вы можете увидеть эти данные как: {"firstname": "test"}

Поделиться
  • 0
    Мне не нужно было ни добавлять тип контента в другие посты jQuery.ajax, ни структурировать JSON - позвольте мне попробовать
  • 0
    Конечно, мы делаем это много для приложений MVC, которые могут потребовать установки ajax по-другому.
Показать ещё 3 комментария
1

Мне кажется, что var firstname = $('#firstname').val() устанавливается на загрузку страницы. Вы хотите переместить его внутри обработчика отправки, чтобы его значение присваивалось при отправке формы:

var joinForm = $('#join');

joinForm.submit(function(e) {
    console.log('submit');
    e.preventDefault();

    var firstname = $('#firstname').val();

    register(firstname);

    return false;
})

Кроме того, в приведенном выше коде вам не хватало нескольких полуколоний, поэтому я бы дважды проверял остальную часть кода на наличие синтаксических ошибок.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню