Question

我有以下脚本：

    $(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');

JS SCRIPT

<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>

Answer 1

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
             }
         });
     });
 });

Answer 2

试试这个..

更改按钮类型＆＃34;提交＆＃34;到＆＃34;按钮＆＃34;

 <button type="submit" id="additem" class="btn btn-primary">Add</button>

to

 <button type="button" id="additem" class="btn btn-primary">Add</button>

 or

<input type="button"  id="additem" class="btn btn-primary" value="Add"/>

AJAX调用不能动态工作？

2 个答案: