javascript - 如何使用php将表单内容发送到数据库

Question

我的问题:我不知道如何将表单的信息发送到数据库

我有什么:

我有一个 html 文件，其中包含 3 个按钮和一个会根据单击的按钮而改变的 div:

<div class="container">
            <h1> Producto</h1>

            <div class ="buttons">
                <button type="button" onclick="loadAddProduct()">Nuevo producto</button>
                <button type="button">Borrar producto</button>
                <button type="button">Actualizar producto</button>

            </div>

            <div class="main_container" id="main_container">

            </div>

        </div>

id =main_container 的 div 根据按钮加载 ajax 函数。单击第一个按钮将加载此表单:

<div class="container">

    <form name="addProductForm" id="addProductForm" action="" onsubmit="" method="post">

        <label for="product_name">Nombre :</label> <input id="product_name" placeholder="Nombre">

        <br> <br>
        <label for="product_desc_short">Descripción corta:</label><br>
        <textarea id="product_desc_short" cols=40 rows=5 placeholder="Descripción corta del prooducto"></textarea>

        <br> <br>
        <label for="product_desc_long">Descripción larga:</label><br>
        <textarea id="product_desc_long" cols=50 rows=7 placeholder="Descripción larga del prooducto"/></textarea>
        <br><br>

        <label for="product_price">Precio :</label> <input id="product_price" placeholder="Precio"/>

        <br> <br>
        <label for="product_stock">Stock :</label> <input id="product_stock" placeholder="Stock">

        <br><br>
        <label for="product_type">Categoria :</label>
        <select id="product_type" name="prod_type">
            <option value="" selected="selected"> Selecciona</option>
            <option value="1"> Gorras</option>
            <option value="2"> Camisetas</option>
            <option value="3"> Tazas</option>
            <option value="4"> Posters</option>
            <option value="5"> Sudaderas</option>
        </select>
        <br>
    </form>
    <br>
    <br>
    <button type="submit" form="addProductForm" value="Submit">Enviar</button>

</div>

最后我有一个包含一组与数据库交互的 php 函数的文件:

php文件:

.....

function addProduct($desc_short, $desc_long, $stock, $price, $name, $image_url, $type)
{

    $conn = connect();

    $sql = "INSERT INTO `products`(`desc_short`, `desc_long`, `stock`, `price`, `name`, `image_url`, `type`)
            VALUES ('" . $desc_short . "','" . $desc_long . "','" . $stock . "','" . $price . "','" . $name . "','" . $image_url . "','" . $type . "')";

    if ($conn->query($sql) === true) {
        $res = array(true, $conn->insert_id);
        $conn->close();
        return $res;
    }

    $conn->close();
    return array(false, -1);
}
.....

我的意图是当用户点击提交按钮，然后启动函数 "addProduct(.....)"将信息上传到数据库，但我不想转到其他页面，只需刷新 <div id="main_container"> , 带有类似 " product uploaded--> ID :XXX". 的小消息

但我真的不知道如何混合所有这些东西。

Answer 1

您必须发送一个 post 请求您的 php 文件。

将按钮更改为:

<button type="button " id="addProductFormBtn" value="Submit">Enviar</button>

添加到你的 JS 中:

$('body').on('click', '#addProductFormBtn', function(){
    //Get data from the form
    var product_desc_short = $('#product_desc_short').val();
    ...//other fields

    //Send the data to your_php_file_path using post request
    $.post( "your_php_file_path", {product_desc_short: product_desc_short,...})
        .done(function( msg_returned_from_php ) {
            $('#main_container').text(msg_returned_from_php)
        });
 }); 

在您的 PHP 文件中使用从请求中收到的参数调用函数:

addProduct($_POST['product_desc_short'],...);

要返回消息，请在文件(或函数)末尾添加 echo :

echo " product uploaded--> ID :XXX";

希望这对您有所帮助。