Javascript 如何在引导中获取触发Ajax请求的按钮

我有一个带引导的模式表单，它与用户在添加到购物车之前定制的特定项目相关联。我试图在单击“添加到购物车”按钮时触发Ajax请求。但是按钮似乎没有触发任何东西。我使用的是Bootstrap示例代码的修改版本：

关于如何让按钮正确触发ajax请求，有什么建议吗

更新：我在下面添加了PHP代码，以防出现问题

HTML:

PHP:

您的代码应该是：

$(document).ready(function () {
var formBasic = function () {
var formData = $("#formBasic").serialize();
$.ajax({
    type: 'post',
    data: formData,
    dataType: 'json',
    url: 'http://localhost/forms.php',
    error: function () {
        alert("There was an error processing this page.");
        return false;
    },
    complete: function (output) {
        $('#formBasicResults').html(output.responseText);
    }
});
return false;
};

$("#basic-submit").on("click", function (e) {
  e.preventDefault();
  formBasic();
});
});

问题：

1-第行缺少逗号：

url: 'http://localhost/forms.php'

2-未定义的表格：

$(form).ajaxSubmit({

工作小提琴： 添加了一个

console.log（）

  $('#formBasic').ajaxSubmit({
     type: 'POST',
     data: formData,
     dataType: 'JSON',
     url: 'http://localhost/forms.php', 

在URL后添加了缺少的逗号

     error: function () {
         alert("There was an error processing this page.");
         return false;
     },
     complete: function (output) {
        console.log(output);

输出对象的另一个console.log

        $('#formBasicResults').html(output.responseText);
     },
     success: function(output) {}

考虑使用success而不是complete，如果成功或出错，则将执行complete

  });
  return false;
});

控制台中有错误吗？您是否包含ajaxSubmit插件？在formBasic函数中添加一个console.log（）。@tymeJV我包含了该插件。我不熟悉如何使用控制台日志。我刚刚添加了
$（document.ready（function（）{console.log（）；}）到我的脚本，但不确定是否正确。URL后缺少逗号。要使用console.log，您必须告诉它要记录什么，例如
console.log（formData）
@tymeJV I添加了console.log（输出）。现在出现以下错误：“未捕获引用错误：未定义输出”
  $('#formBasic').ajaxSubmit({
     type: 'POST',
     data: formData,
     dataType: 'JSON',
     url: 'http://localhost/forms.php', 

     error: function () {
         alert("There was an error processing this page.");
         return false;
     },
     complete: function (output) {
        console.log(output);

        $('#formBasicResults').html(output.responseText);
     },
     success: function(output) {}

  });
  return false;
});