Javascript 使用Ajax将页面上的项目更新到数据库_Javascript_Php_Jquery_Mysql_Ajax

Javascript 使用Ajax将页面上的项目更新到数据库

javascript php jquery mysql ajax

Javascript 使用Ajax将页面上的项目更新到数据库,javascript,php,jquery,mysql,ajax,Javascript,Php,Jquery,Mysql,Ajax,好的，我想首先说我很抱歉，如果之前有人问过这个问题。不过，我似乎在提问部分找不到它，我花了几个小时寻找我需要的东西 <input type="hidden" id="idArea-'.$row["id"].'" value="'.$row["id"].'"> <input type="number" id="qtyArea-'.$row["id"].'" value="0">

好的，我想首先说我很抱歉，如果之前有人问过这个问题。不过，我似乎在提问部分找不到它，我花了几个小时寻找我需要的东西

            <input type="hidden" id="idArea-'.$row["id"].'" value="'.$row["id"].'">
                            <input type="number" id="qtyArea-'.$row["id"].'" value="0">

                            // + javascript

                            $(document).ready(function(){
                                $('[id^=FormSubmitAddToCart]').click(function(){
                                // now this is your product id, and now you should
                                    var p_id= $(this).attr('id').replace('FormSubmitAddToCart-', '');

                               // this is  your quantity
                                    var p_qty = $('#qtyArea-'+p_id).val();

                                    // + now you know the product id and quantity, so you should handle the rest

                                })
                            });

因此，首先。我正在从数据库->产品中的表中提取数据行。然后将它们添加到购物车中。我知道如何在PHP中实现这一点，但我对JavaScript和Ajax还不熟悉。我确实有我的代码，我可以提交一个表单添加到数据库中，但在第一个表单之后，它对任何表单都不起作用

            <input type="hidden" id="idArea-'.$row["id"].'" value="'.$row["id"].'">
                            <input type="number" id="qtyArea-'.$row["id"].'" value="0">

                            // + javascript

                            $(document).ready(function(){
                                $('[id^=FormSubmitAddToCart]').click(function(){
                                // now this is your product id, and now you should
                                    var p_id= $(this).attr('id').replace('FormSubmitAddToCart-', '');

                               // this is  your quantity
                                    var p_qty = $('#qtyArea-'+p_id).val();

                                    // + now you know the product id and quantity, so you should handle the rest

                                })
                            });

我将包括我的所有代码，但我只是需要帮助，找出如何添加到购物车的每个项目。这在逻辑上对我来说似乎很简单，但我无法找出正确的方法来做这件事，并感谢任何帮助

            <input type="hidden" id="idArea-'.$row["id"].'" value="'.$row["id"].'">
                            <input type="number" id="qtyArea-'.$row["id"].'" value="0">

                            // + javascript

                            $(document).ready(function(){
                                $('[id^=FormSubmitAddToCart]').click(function(){
                                // now this is your product id, and now you should
                                    var p_id= $(this).attr('id').replace('FormSubmitAddToCart-', '');

                               // this is  your quantity
                                    var p_qty = $('#qtyArea-'+p_id).val();

                                    // + now you know the product id and quantity, so you should handle the rest

                                })
                            });

这是我的代码，用于显示数据库产品的页面

//*script*//
    <script type="text/javascript">
            $(document).ready(function() {


                $("#FormSubmitAddToCart").click(function (e) {
                        e.preventDefault();
                        if($("#qtyArea").val()==='0')
                        {
                            alert("Please enter a quantity!");
                            return false;
                        }

                        $("#FormSubmitAddToCart").hide(); //hide submit button
                        $("#LoadingImage").show(); //show loading image

                        var id = 'id='+ $("#idArea").val();
                        var qty = 'qty='+ $("#qtyArea").val(); 
                        var myData = id+'&'+qty;
                        //alert(myData);
                        jQuery.ajax({
                        type: "POST", // HTTP method POST or GET
                        url: "response.php", //Where to make Ajax calls
                        dataType:"text", // Data type, HTML, json etc.
                        data:myData, //Form variables
                        success:function(response){
                            $("#responds").append(response);
                            $("#idArea").val(''); //empty text field on successful
                            $("#qtyArea").val(''); //empty text field on successful
                            $("#FormSubmitAddToCart").show(); //show submit button
                            $("#LoadingImage").hide(); //hide loading image

                        },
                        error:function (xhr, ajaxOptions, thrownError){
                            $("#FormSubmitAddToCart").show(); //show submit button
                            $("#LoadingImage").hide(); //hide loading image
                            alert(thrownError);
                        }
                        });
                });
    </script>

//*selects products from database*//
<?php
include_once("config.php");

$results = $mysqli->query("SELECT * FROM products");
while($row = $results->fetch_assoc()) {
    echo '<li id="item_'.$row["id"].'">
            <div class="del_wrapper">
                '.$row["name"].' - $'.$row["price"].'
                <input type="hidden" id="idArea" value="'.$row["id"].'">
                <input type="number" id="qtyArea" value="0">
                <button id="FormSubmitAddToCart">Add to Cart</button>
            </div>
        </li><br />';
}

?>

            <input type="hidden" id="idArea-'.$row["id"].'" value="'.$row["id"].'">
                            <input type="number" id="qtyArea-'.$row["id"].'" value="0">

                            // + javascript

                            $(document).ready(function(){
                                $('[id^=FormSubmitAddToCart]').click(function(){
                                // now this is your product id, and now you should
                                    var p_id= $(this).attr('id').replace('FormSubmitAddToCart-', '');

                               // this is  your quantity
                                    var p_qty = $('#qtyArea-'+p_id).val();

                                    // + now you know the product id and quantity, so you should handle the rest

                                })
                            });

我的响应页面正在工作，并将第一个表单数据发布到购物车表

            <input type="hidden" id="idArea-'.$row["id"].'" value="'.$row["id"].'">
                            <input type="number" id="qtyArea-'.$row["id"].'" value="0">

                            // + javascript

                            $(document).ready(function(){
                                $('[id^=FormSubmitAddToCart]').click(function(){
                                // now this is your product id, and now you should
                                    var p_id= $(this).attr('id').replace('FormSubmitAddToCart-', '');

                               // this is  your quantity
                                    var p_qty = $('#qtyArea-'+p_id).val();

                                    // + now you know the product id and quantity, so you should handle the rest

                                })
                            });

我知道我需要某种循环或方法来识别使用按钮提交的表单，但不确定如何执行此操作。有什么建议吗？我只是想让你知道，在我的东西开始工作后，我会保护好我的东西。谢谢D

            <input type="hidden" id="idArea-'.$row["id"].'" value="'.$row["id"].'">
                            <input type="number" id="qtyArea-'.$row["id"].'" value="0">

                            // + javascript

                            $(document).ready(function(){
                                $('[id^=FormSubmitAddToCart]').click(function(){
                                // now this is your product id, and now you should
                                    var p_id= $(this).attr('id').replace('FormSubmitAddToCart-', '');

                               // this is  your quantity
                                    var p_qty = $('#qtyArea-'+p_id).val();

                                    // + now you know the product id and quantity, so you should handle the rest

                                })
                            });

************************修复了在这些行下面工作的代码**************************

            <input type="hidden" id="idArea-'.$row["id"].'" value="'.$row["id"].'">
                            <input type="number" id="qtyArea-'.$row["id"].'" value="0">

                            // + javascript

                            $(document).ready(function(){
                                $('[id^=FormSubmitAddToCart]').click(function(){
                                // now this is your product id, and now you should
                                    var p_id= $(this).attr('id').replace('FormSubmitAddToCart-', '');

                               // this is  your quantity
                                    var p_qty = $('#qtyArea-'+p_id).val();

                                    // + now you know the product id and quantity, so you should handle the rest

                                })
                            });

这是现在对我有效的完整更新

            <input type="hidden" id="idArea-'.$row["id"].'" value="'.$row["id"].'">
                            <input type="number" id="qtyArea-'.$row["id"].'" value="0">

                            // + javascript

                            $(document).ready(function(){
                                $('[id^=FormSubmitAddToCart]').click(function(){
                                // now this is your product id, and now you should
                                    var p_id= $(this).attr('id').replace('FormSubmitAddToCart-', '');

                               // this is  your quantity
                                    var p_qty = $('#qtyArea-'+p_id).val();

                                    // + now you know the product id and quantity, so you should handle the rest

                                })
                            });

脚本代码

<script type="text/javascript">
        $(document).ready(function(){
            $('[id^=FormSubmitAddToCart]').click(function(){
            // now this is your product id, and now you should
                var p_id= $(this).attr('id').replace('FormSubmitAddToCart-', '');

            // this is  your quantity
                var p_qty = $('#qtyArea-'+p_id).val();

            // + now you know the product id and quantity, so you should handle the rest

                var myData = 'id='+p_id+'&qty='+p_qty;

                alert(myData);
            //  throw new Error("Something went badly wrong!");

                jQuery.ajax({
                type: "POST", // HTTP method POST or GET
                url: "response.php", //Where to make Ajax calls
                dataType:"text", // Data type, HTML, json etc.
                data:myData, //Form variables
                success:function(response){
                    $("#responds").append(response);
                    $("#idArea").val(''); //empty text field on successful
                    $("#qtyArea").val(''); //empty text field on successful
                    $("#FormSubmitAddToCart").show(); //show submit button
                    $("#LoadingImage").hide(); //hide loading image

                },
                error:function (xhr, ajaxOptions, thrownError){
                    $("#FormSubmitAddToCart").show(); //show submit button
                    $("#LoadingImage").hide(); //hide loading image
                    alert(thrownError);
                }
                });

            })
        });
    </script>

            <input type="hidden" id="idArea-'.$row["id"].'" value="'.$row["id"].'">
                            <input type="number" id="qtyArea-'.$row["id"].'" value="0">

                            // + javascript

                            $(document).ready(function(){
                                $('[id^=FormSubmitAddToCart]').click(function(){
                                // now this is your product id, and now you should
                                    var p_id= $(this).attr('id').replace('FormSubmitAddToCart-', '');

                               // this is  your quantity
                                    var p_qty = $('#qtyArea-'+p_id).val();

                                    // + now you know the product id and quantity, so you should handle the rest

                                })
                            });

提交表格代码：

<?php
    include_once("config.php");

    $results = $mysqli->query("SELECT * FROM products");
    while($row = $results->fetch_assoc()) {
        echo '<li id="item_'.$row["id"].'">
                <div class="del_wrapper">
                    '.$row["name"].' - $'.$row["price"].'

                    <input type="hidden" id="idArea-'.$row["id"].'" value="'.$row["id"].'"/>
                    <input type="number" id="qtyArea-'.$row["id"].'" value="0">
                    <button id="FormSubmitAddToCart-'.$row["id"].'">Add to Cart</button>
                </div>
            </li><br />';
    }

?>

            <input type="hidden" id="idArea-'.$row["id"].'" value="'.$row["id"].'">
                            <input type="number" id="qtyArea-'.$row["id"].'" value="0">

                            // + javascript

                            $(document).ready(function(){
                                $('[id^=FormSubmitAddToCart]').click(function(){
                                // now this is your product id, and now you should
                                    var p_id= $(this).attr('id').replace('FormSubmitAddToCart-', '');

                               // this is  your quantity
                                    var p_qty = $('#qtyArea-'+p_id).val();

                                    // + now you know the product id and quantity, so you should handle the rest

                                })
                            });

response.php页面

<?php
//include db configuration file
include_once("config.php");

if(isset($_POST["qty"]) && ($_POST["qty"] != 0) ) {
    //check $_POST["content_txt"] is not empty

    //sanitize post value, PHP filter FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_HIGH Strip tags, encode special characters.
    $MID = "43";
    $ID = $_POST["id"];
    $QTY = $_POST["qty"];

    echo $ID.$QTY;

    // Insert sanitize string in record
    //$insert_row = $mysqli->query("INSERT INTO add_delete_record(content,qty) VALUES('".$contentToSave.",".$QTY."')");

    $insert_row = $mysqli->prepare('INSERT INTO orders(members_id, product_id, quantity) VALUES (?,?,?)');
    $insert_row->bind_param('iii', $MID, $ID, $QTY);
    $insert_row->execute();
    $insert_row->close();

    if($insert_row)
    {
         //Record was successfully inserted, respond result back to index page
          $my_id = $mysqli->insert_id; //Get ID of last inserted row from MySQL
          echo '<li id="item_'.$my_id.'">';
          echo '<div class="del_wrapper"><a href="#" class="del_button" id="del-'.$my_id.'">';
          echo '<img src="images/icon_del.gif" border="0" />';
          echo '</a></div>';
          echo $ID.'-'.$QTY.'</li>';
          $mysqli->close(); //close db connection

    }else{

        //header('HTTP/1.1 500 '.mysql_error()); //display sql errors.. must not output sql errors in live mode.
        header('HTTP/1.1 500 Looks like mysql error, could not insert record!');
        exit();
    }

}
?>

            <input type="hidden" id="idArea-'.$row["id"].'" value="'.$row["id"].'">
                            <input type="number" id="qtyArea-'.$row["id"].'" value="0">

                            // + javascript

                            $(document).ready(function(){
                                $('[id^=FormSubmitAddToCart]').click(function(){
                                // now this is your product id, and now you should
                                    var p_id= $(this).attr('id').replace('FormSubmitAddToCart-', '');

                               // this is  your quantity
                                    var p_qty = $('#qtyArea-'+p_id).val();

                                    // + now you know the product id and quantity, so you should handle the rest

                                })
                            });

您的html应该如下所示。

            <input type="hidden" id="idArea-'.$row["id"].'" value="'.$row["id"].'">
                            <input type="number" id="qtyArea-'.$row["id"].'" value="0">

                            // + javascript

                            $(document).ready(function(){
                                $('[id^=FormSubmitAddToCart]').click(function(){
                                // now this is your product id, and now you should
                                    var p_id= $(this).attr('id').replace('FormSubmitAddToCart-', '');

                               // this is  your quantity
                                    var p_qty = $('#qtyArea-'+p_id).val();

                                    // + now you know the product id and quantity, so you should handle the rest

                                })
                            });

首先，如果设置的id有问题，因为在循环中使用qtyrea和idrea，所以两个元素的id是相同的，这就是我遇到的问题。我试图使用产品id添加到按钮id，这样它将是一个独特的id，就像添加到购物车一样，但我不确定之后该怎么办。@请检查答案。嘿@AbhisekMalakar，谢谢你的时间和回复。我要测试一下，然后再给你回复！看来我做错了。好极了，先生，你的密码成功了。我只需要在我这方面做一些调整，这是光荣的！非常感谢你！对于任何需要查看完整代码的人，我将编辑我的问题，并将其发布在我所有原始资料的下面。希望它能帮助你一次看到所有的东西。