Не могу отобразить данные JSON в HTML, используя метод поста Jquery Ajax

Question

В моем html есть эти строки

   <form id="purchaseform">
        <input id="quantity" name="quantity" type="number" value="1">
        <input name="product" type="hidden" value={{item_id}}>
        <input id="submit" type="submit" value="Add to Cart">
    </form>

После того, как я нажму "отправить", я хочу, чтобы это отображалось в этом разделе моего HTML Ваша Корзина: Попытка сделать это с помощью метода ajax, но после нажатия кнопки Отправить ничего не отображается. Кто-нибудь может разобраться в проблеме?

$("#submit").submit(function(event){
event.preventDefault()
                    $.ajax({
                    type: "POST",
                    url: '/cart',
                    dataType: "json",
                    success:function(data) {
                        console.log(data);
                        $("#cart-template").html(data)
                    }
                })
               })

Answer 1

Существует несколько проблем с вашим кодом, поэтому я подробно объясню вам почему.

Если вы отправляете через POST, отправьте данные.

Первая проблема IЯ видел, что вы ничего не отправляете с запросом AJAX.Чтобы отправить конкретные данные, используйте свойство data:

        $.ajax({
            type: "POST",
            url: '/cart',
            data: $(this).serialize(), // Call the form values as a string
            success: function(data) {
                console.log(data);
                $("#cart-template").html(data)
            }
        })

Но что такое this?

Обработка формы отправки из самой формы.

Это означает, что не ждите, пока не будет нажата кнопка отправки.Чтобы ваш код JavaScript стал лучше в контексте вашего приложения, обработайте отправленную форму, чтобы начать работать:

$("#purchaseform").submit(function(event){
   ...
})

Итак, #purchaseform должен быть вашим тегом формы.

Обработкаформа, подобная этой, позволит вам использовать this для ссылки на фактическую отправленную форму.

Вот почему мы использовали: $(this).serialize().

Определите, какой тип данныхструктуру, которую вы будете использовать.

Как я видел в вашем коде, вы предположительно отправляете dataTyoe: "json", но позже вы используете вывод вашего запроса AJAX и добавляете его в виде HTML.

Итак, самый простой способ, если вы хотите вернуть HTML из запроса AJAX, удалить свойство dataType, чтобы ваш код выглядел так:

$("#purchaseform").submit(function(event){
        event.preventDefault()
        $.ajax({
            type: "POST",
            url: '/cart',
            data: $(this).serialize(),
            success: function(data) {
                console.log(data);
                $("#cart-template").html(data)
            }
        })
})

Вот это LIVE DEMO так что вы можете попробовать разные вещи вокруг него.