javascript - PHP jQuery aJax 来自响应和数据

Question

不确定我缺少什么，但我在尝试构建我的代码时遇到了一些问题。

• 数据没有从表单传递到数据库(空白条目)
• 它也将转到 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">&times;</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');
            }

        });
    });

Answer 1

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/