我有一个带有 Bootstrap 的模态表单，该表单与用户在添加到购物车之前自定义的特定项目相关联。我正在尝试在单击"添加到购物车"按钮时触发 Ajax 请求。但是该按钮似乎没有触发任何东西。我正在使用 Bootstrap 示例代码的修改版本：http://getbootstrap.com/javascript/#modals-related-target
关于如何让按钮正确触发 ajax 请求的任何建议？
更新：我在下面添加了PHP代码，以防这可能是问题所在。
.HTML：
<div class="modal-body">
<form name="formBasic" id="formBasic">
<input type="hidden" name="function" value="basic-form">
<div class="form-group">
<label for="message-text" class="control-label">Enter customized information</label>
<textarea class="form-control" id="customized-information"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="basic-submit">Add to Cart</button>
</div>
Javascript：
$(document).ready(function () {
var formBasic = function () {
var formData = $("#formBasic").serialize();
$(form).ajaxSubmit({
type: 'post',
data: formData,
dataType: 'json',
url: 'http://localhost/forms.php'
error: function () {
console.log(output);
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();
});
});
.PHP：
//formBasic Processing
function formBasic(){
$output = 'Output from Form Basic:
';
foreach ($_POST as $key => $value) {
$output .= $key . ': ' . $value . '
';
}
echo $output;
}
//FormAdvanced Processing
//. . .
if(in_array($_POST['function'], array('formBasic','formAdvanced'))){
$_POST['function']();
}else{
echo 'There was an error processing the form';
}
你的代码应该是：
$(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({
工作小提琴：http://jsfiddle.net/p9v2eg4u/2/
$('#basic-submit').click(function() {
var formData = $("#formBasic").serialize();
console.log(formData);
添加了表单数据值的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);
另一个控制台.log输出对象
$('#formBasicResults').html(output.responseText);
},
success: function(output) {}
请考虑使用成功而不是完成，如果成功或错误，将执行完成。
});
return false;
});