PHP窗體（刷新）到AJAX（不刷新）

Question

我有一段代碼，我想知道如何才能轉換到AJAX，因此頁面不刷新。

此刻，我的劇本是這樣的設計：https://gyazo.com/53be943f00fd372cab8555bc8ad7c1f2

基本上，在多個客戶機類型（數量），那麼他們選擇從菜單2個下拉菜單。他們選擇他們必須交易的東西以及他們從交易中得到的東西。在我的數據庫中，我讓它檢查有和想要並從交易項目的比率獲得一行的價值。然後我做費率 * 數量來計算交易的成本。

目前，我的代碼正在刷新頁面，因爲它是通過PHP Form方法完成的。我想將它轉換爲ajax，所以它不會刷新頁面。

誰能幫助？

我的代碼是：

<form method="POST" action="#trading"> 
    <input type="hidden" value="<? echo $product_id; ?>" id="calc_name_<? echo $product_id; ?>"> 
    <input type="hidden" value="<? echo $product_rate; ?>" id="calc_rate_<? echo $product_id; ?>"> 

    <?php $query = mysqli_query($con, "SELECT * FROM tradable_items"); $query2 = mysqli_query($con, "SELECT * FROM tradable_items"); ?> 

    <input type="text" class="form-control" name="quantity_input" style="background: white; border-radius: 5px; float: left; width: 24%; text-align: center;" placeholder="Quantity" required=""> 

    <select name="tradable_have" class="form-control" style="border-radius: 5px; float: left; width: 24%; text-align: center; margin-left: 15px;"> 
    <option>Select what you have</option> 
    <?php 
     while ($row = mysqli_fetch_array($query)) { 
      echo '<option value="'.htmlspecialchars($row['name']).'">'.$row['name'].'</option>'; 
     } 
    ?> 
    </select> 

    <select name="tradable_want" class="form-control" style="border-radius: 5px; float: right; width: 49%; text-align: center;"> 
    <option>Select what you want</option> 
    <?php 
     while ($row = mysqli_fetch_array($query2)) { 
      echo '<option value="'.htmlspecialchars($row['name']).'">'.$row['name'].'</option>'; 
     } 
    ?> 
    </select> 


<?php 
    if(isset($_POST['calculate_trade'])) { 

     $item_name_have = $_POST['tradable_have']; 
     $item_name_want = $_POST['tradable_want']; 
     $item_quantity = $_POST['quantity_input']; 

     $query_tradables = mysqli_query($con, "SELECT * FROM tradables WHERE name_from = '$item_name_have' AND name_to = '$item_name_want' LIMIT 1"); 

     while($row_tradable = mysqli_fetch_array($query_tradables)) { 
      $product_item_rate = $row_tradable['price']; 
     } 

    ?> 
     <input type="text" class="form-control" id="quantity_trader" style="background: #B5B5B5; border-radius: 5px; width: 100%; text-align: center;" readonly disabled placeholder="You will get: <?php echo $item_name_want; ?> (X<?php echo $item_quantity; ?>) for $<?php echo $item_quantity * $product_item_rate; ?>" required=""> 
    <?php 
    } else { 
    ?> 
     <input type="text" class="form-control" id="quantity_trader" style="background: #B5B5B5; border-radius: 5px; width: 100%; text-align: center;" readonly disabled placeholder="What you will get" required=""> 
    <?php 
    } 
?> 


<div class="pricing-table-cta"> 
    <button class="btn btn-default" type="submit" name="calculate_trade" style="width: 49%; float: left;">Calculate Trade</button> 

    <?php 
     if(isset($_POST['calculate_trade'])) { 
     ?> 
      <a href="javascript:$zopim.livechat.say('I want to trade my <?php echo $item_name_have; ?> for your <?php echo $item_name_want; ?> in the quantity of <?php echo $item_quantity; ?> for the price of $<?php echo $item_quantity * $product_item_rate; ?>');" class="btn btn-default" style="width: 49%; float: right;">Order Now</a> 
     <?php 
     } else { 
     ?> 
      <button class="btn btn-default" disabled="" style="width: 49%; float: right;">Order Now (Calculate First)</button> 
     <?php 
     } 
    ?> 

</div> 


</form> 

Answer 1

按照以下步驟。

1. 刪除輸入型=該按鈕的點擊 '提交' 爲type = 「按鈕」

2. 得到所有的輸入值。例如

   $('.button').click(function(){ 
   
       var inputData = $('form').serialize(); 
       $.ajax({ 
        url: url, 
        type: 'POST', 
        data:inputData, 
        success: function (data) { 
   
         Console.log(data) 
        }, 
        error: function (data) { 
        } 
       }); 
   }); 
   

Answer 2

AJAX是專爲這種類型的任務。

基本上，這些東西是你需要做的：

• 取出<form>標記並從提交按鈕type="submit"（爲防止頁面正常提交或刷新）
• 附加事件監聽器提交按鈕，它發送AJAX請求

這就是代碼應該是這樣的：

HTML：

<input type="text" name="quantity_input" id="quantity_input" /> 
<select name="tradable_have" id="tradable_have"> 
    <option value="1">A</option> 
    <option value="2">B</option> 
    <option value="3">C</option> 
</select> 
<select name="tradable_want" id="tradable_want"> 
    <option value="1">A</option> 
    <option value="2">B</option> 
    <option value="3">C</option> 
</select> 
<button id="submit-btn">Submit!</button> 

的javascript：

function callAjax() 
{ 
    var xhttp = new XMLHttpRequest(); 
    var params = "quantity_input=" + document.getElementById("quantity_input").value; 
    params += "&" + "tradable_have=" + document.getElementById("tradable_have").value; 
    params += "&" + "tradable_want=" + document.getElementById("tradable_want").value; 
    // parameters sent should be formatted like key1=value1&key2=value2 and so on 
    xhttp.onreadystatechange = function() 
    { 
     if (this.readyState == 4 && this.status == 200) 
     { 
     // on response 
     alert(this.responseText); 
     } 
    }; 
    xhttp.open("POST", "#", true); 
    xhttp.send(params); 
} 

document.getElementById("submit-btn").addEventListener("click", callAjax); 

或者如果你喜歡的jQuery：

$("#submit-btn").on("click", function(){ 
    $.ajax("#", { 
     method: "post", 
     data: { 
      quantity_input: $("#quantity_input").val(), 
      tradable_have: $("#tradable_have").val(), 
      tradable_want: $("#tradable_want").val() 
      // formatted like key1: value1, key2: value2 and so on 
     }, 
     success: function(data){ 
      // on response 
      alert(data); 
     } 
    }); 
}); 

，並從PHP返回計算值AJAX是使用簡單的echo

PHP（頁面頂部）：

<?php 

if(!empty($_POST)) // check if submitted or not 
{ 
    echo calculate($_POST["quantity_input"]); 
    exit; // echo only calculated, not html 
} 

?>