通过jquery提交表单时没有ajax post请求答案

【问题标题】：No ajax post request when submitting form through jquery通过jquery提交表单时没有ajax post请求
【发布时间】：2020-02-28 20:34:51
【问题描述】：

我正在尝试将我的表单提交到服务器。我使用 pug 创建表单，然后通过 ajax 提交它。我已经编写了一个测试控制台日志，以查看是否正在提交表单并且没有记录消息。出了什么问题？

但是，我在表单上输入的任何内容都会出现在 ? 之后的 url 中。另外，为什么不发出 post 请求？

我的表格：-

form(id="newProductForm")
            p
                label(for="title") Product Title:
                input(type="text" name="title" id="title" placeholder="Product Title" required autofocus)
            p
                label(for="description") Product Description:
                input(type="text" name="description" id="description" placeholder="Product Description" required autofocus)
            p
                label(for="Price") Price: 
                input(type="price" name="price" id="price" placeholder="Set Price" required autofocus)
            p
                label(for="Price") Shipping Charges: 
                input(type="text" name="shippingCharge" id="shippingCharge" placeholder="Set Shipping Charges" required autofocus)
            p
                label(for="Price") Shipping Time: 
                input(type="text" name="shippingTime" id="shippingTime" placeholder="Set Shipping Time" required autofocus)
            p
                label(for="quantity") Total Quantity: 
                input(type="text" name="quantity" id="quantity" placeholder="Set Total Quantity" required autofocus)
            p
                label(for="tags") Tags (Seperated by comma): 
                input(type="text" name="tags" id="tags" placeholder="Set Price" required autofocus)
            //Add drag and drop image upload feature soon

            p
                button(type="submit" id="addProductButton") Add New product

我提交表单的JS代码：-

    $(document).ready( function () {
    getAllProducts();

    $('#newProductForm').submit( function(e) {
        e.preventDefault();
        let arr = $(this).serializeArray();
        console.log("Form values: "+ arr);

        $.post({
            url: '/admin/add',
            type: 'POST',
        }).done( response => {
            resetProductTable();
            console.log("Admin add is being requested!")
        })
    })
})

【问题讨论】：

你的意思是你的函数被post调用不是请求的吗？你在开发者控制台的网络选项卡中看到了什么？
控制台上什么都没有
但是，我可以看到我输入的数据记录在 url 区域中。我的行为很奇怪

标签： javascript jquery ajax

【解决方案1】：

我认为您的表单没有提交对吗？你可以用这个方法，我想你的问题应该解决了。

$(document).submit('#newProductForm'', function (e) {
)}

【讨论】：

那行得通。非常感谢！我可以知道是什么导致了问题吗？？
是的，当然，我们正在提交表单，但实际上是在加载我们的文档。 document 表示整个页面，你明白吗？

【解决方案2】：

您的提交按钮定义为<button>

p
  button(type="submit" id="addProductButton") Add New product

我相信它应该是<input>，您可以根据自己的喜好将其设置为按钮：

p
  input(type="submit" id="addProductButton") Add New product

【讨论】：

在你的函数顶部添加e.preventDefault()。

【解决方案3】：

将触发提交事件改为

$(document).on('click', '#addProductButton', ()={
...
}):

这会将事件直接与 sumbit 按钮绑定。

【讨论】：