AJAX呼叫无法动态工作？

大象

我有以下脚本：

    $(document).ready(function(){
        $('#additem').click(function(){
            $.ajax({
                 type: 'POST',
                 url: 'php/additem.php',
                 data: {itemName: $('#itemName').val()},
                 data: {pricetotal: $('#price').val()},
                 data: {description: $('#description').val()},
                 success: function(data)
                 {
                    Can i call a separate ajax query here? I want to repull my two tables data so the resulting itemadd seems dynamic.
                 }
             });
         });
     });

这是HTML：

    <div class="col-sm-4 col-md-4">
                    <div class="content-boxes style-two top-column clearfix animated flipInY" style="opacity: 1;">
                        <div class="content-boxes-text">
                            <form action="php/additem.php" method="post" class="form-inline pull-right">
                                <h4>'.$row['itemName'].'</h4><input id="itemName" type="hidden" name="itemName" value="'.$row['itemName'].'">
                                <h3>$'.$price.'</h3><input id="price" type="hidden" name="pricetotal" value="'.$price.'">   
                                <img src="../wholesale/img/sourdough.jpg" class="img-reponsive">
                                <p>'.$row['description'].'</p><input id="description" type="hidden" name="description" value="'.$row['description'].'">
                                <div class="form-group">
                                <label class="sr-only" for="exampleInputAmount">Qty</label>
                                <div class="input-group">
                                <input type="number" name="qty" class="form-control" id="qtyitem" placeholder="How Many?">
                                </div>
                                </div>
                                <button type="submit" id="additem" class="btn btn-primary">Add</button>
                            </form>
                        </div>
                        <!-- //.content-boxes-text -->
                    </div>
                    <!-- //.content-boxes -->
                </div>

问题是当我提交表单时，页面像普通查询一样重新加载。页面不应刷新，并且项目添加应动态进行。

我有一个想法：我的初始加载会从两个表中提取数据，所以最好在添加项目后回想一下最初的ajax查询吗？

请给我推理您写的任何东西，以便我可以从中学到东西。谢谢你们。

    session_start();
include('db_config.php');

$date = date("Y-m-d");
$itemname = $_POST['itemName'];
$description = $_POST['description'];
$qty = $_POST['qty'];
$price = $_POST['pricetotal'] * $qty;
$id = $_SESSION['customer_id'];

$sql = "INSERT INTO orders (deliveryDate, customerId, itemName, qty, price) VALUES (?, ?, ?, ?, ?)";

$stmt = $conn->prepare($sql);
$stmt->execute(array($date, $id, $itemname, $qty, $price));

header('Location: ../order.php');

脚本

<script type="text/javascript">
    $(document).ready(function(){
    $('.form-inline').on("submit",function(event){
       event.preventDefault();
        $.ajax({
             type: 'POST',
             url: 'php/additem.php',
             data: {
                  itemName: $('#itemName').val(), 
                  pricetotal: $('#price').val(), 
                  description: $('#description').val(),
                  qty: $('#qtyitem').val()
             },
             success: function(data)
             {
                alert(data);
             }
         });
      });
 });   
 </script>

梅内什·贾恩

additem按钮是一个提交按钮，因此它执行默认操作

为了避免您的页面重新加载，请执行此操作

使用：event.preventDefault（）;

将您的代码更改为

   $(document).ready(function(){
    $('.form-inline').on("submit",function(event){
       event.preventDefault();
        $.ajax({
             type: 'POST',
             url: 'php/additem.php',
             data: {
                      itemName: $('#itemName').val(), 
                      pricetotal: $('#price').val(), 
                      description: $('#description').val()
             },
             success: function(data)
             {
                // perform action
             }
         });
     });
 });

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。