不知道我错过了什么，但我的代码试图构建时遇到了一些问题。
的HTML
<form action="response.php" method="post" id="add_product">
<input type="hidden" name="action" value="add_product">
<div class="row">
<div id="response" class="alert alert-success" style="display:none;">
<a href="#" class="close" data-dismiss="alert">×</a>
<div class="message"></div>
</div>
<div class="col-xs-4">
<input type="text" class="form-control" id="product_name" placeholder="Enter product name">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" id="product_desc" placeholder="Enter product description">
</div>
<div class="col-xs-4">
<div class="input-group">
<span class="input-group-addon"><?php echo CURRENCY ?></span>
<input type="text" id="product_price" class="form-control" placeholder="0.00" aria-describedby="sizing-addon1">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 margin-top btn-group">
<input type="submit" id="action_add_product" class="btn btn-success float-right" value="Add product" data-loading-text="Adding...">
</div>
</div>
响应PHP
//check if any connection error was encountered
if(mysqli_connect_errno()) {
echo "Error: Could not connect to database.";
exit;
}
$action = isset($_POST['action']) ? $_POST['action'] : "";
// Adding new product
if($action == 'add_product') {
$data = $_POST['serialize']; // serialize the data
$product_name = $data['product_name'];
$product_desc = $data['product_desc'];
$product_price = $data['product_price'];
//our insert query query
$query = "INSERT INTO products SET
product_name = '".$product_name."',
product_desc = '".$product_desc."',
product_price = '".$product_price."'
";
//execute the query
if($mysqli -> query($query)) {
//if saving success
echo "User was created.";
} else {
//if unable to create new record
echo "Database Error: Unable to create record.";
}
//close database connection
$mysqli -> close();
}
脚本
// add product
$('#action_add_product').click(function(){
var $btn = $(this).button('loading');
$.ajax({
url: 'response.php',
type: 'POST',
data: $('#add_product').serialize(),
success: function(result){
$('#response .message').html('Product has been added successfully!');
$('#response').fadeIn();
$btn.button('reset');
}
});
});
数据没有从表单传递到数据库（空白条目）
您在name表单输入中缺少属性。调试输出$('#add_product').serialize()验证此。
它也将进入repsonse.php，而不是停留在表单页面上
您可以将表单操作设置为#（如Harigovind所指出的），我更喜欢绑定submit表单的事件，并阻止表单的默认执行。这也解决了人们不按下按钮（触发click事件）而是使用enter按键代替的问题：
$("#add_product").on("submit", function(e) {
e.preventDefault(); // prevent default POST of form
$.ajax({
// etc
});
});
JSFiddle：https：//jsfiddle.net/trL5t80w/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句