AJAX調用不能動態工作？

我有以下腳本：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');

JS腳本

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

來源

2015-04-29 Elevant

警報（$（ '＃qtyitem'）。VAL （））在event.preventDefault（）之後; 看到你在警報框中得到了什麼 –

警報出現空白：/這真是令人困惑，我有正確的名字嗎？ – Elevant

使用輸入名稱的值而不是像這樣** $（「input [name ='field-name']」）。val（）** –

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

來源

2015-04-29 10:36:44

我是否需要向php文件添加任何內容以便返回結果？ – Elevant

是回聲您的結果從PHP頁面作爲一個字符串，所以你會得到它在這裏，因爲它是在數據和使用數據從成功執行furthur行動， –

作出改變你的ajax，數據應該像這樣使用 –

試試這個..

更改按鈕式「提交」，「按鈕」

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

來源

2015-04-29 10:38:02

AJAX調用不能動態工作？

回答

相關問題