Question

我有一个带有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';
}

Answer 1

您的代码应为：

$(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/

Answer 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',

在网址

后添加了缺少的逗号

     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) {}

考虑使用成功而不是完成，完成将在成功或错误时执行。

  });
  return false;
});

如何获取按钮在Bootstrap中触发Ajax请求

2 个答案:

工作小提琴：http://jsfiddle.net/p9v2eg4u/2/