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，请发送数据。

我看到的第一个问题是您没有通过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。

因此，如果要从AJAX请求返回HTML的最简单方法是，删除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，因此您可以尝试使用其他方法。

无法使用Jquery Ajax post方法将json数据显示为html

1 个答案:

如果要发送低谷POST，请发送数据。

从表单本身处理表单提交。

确定要使用的数据结构类型。