不确定我缺少什么,但我在尝试构建我的代码时遇到了一些问题。
- 数据没有从表单传递到数据库(空白条目)
- 它也将转到 repsonse.php 而不是停留在表单页面上
- 如何将成功和错误的响应从 response.php 传回表单以显示在前端表单上?
- 最后它添加了两次数据(空白条目但两次都相同)
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();
}
脚本.JS
// 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');
}
});
});
最佳答案
The data is not passing from the form to the database (blank entries)
您的表单输入缺少 name
属性。调试 $('#add_product').serialize()
的输出可以验证这一点。
Its also going to repsonse.php and not staying on the forms page
您可以将表单操作设置为 #
(正如 Harigovind 指出的那样),我更喜欢绑定(bind)表单的 submit
事件,并防止默认执行表格。这也解决了人们不按下按钮(触发您的 click
事件)而是使用 enter
键的问题:
$("#add_product").on("submit", function(e) {
e.preventDefault(); // prevent default POST of form
$.ajax({
// etc
});
});
JSFiddle:https://jsfiddle.net/trL5t80w/
关于javascript - PHP jQuery aJax 来自响应和数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30001684/