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

按照以下步骤操作。

将输入类型='提交'移至type =“button”

点击该按钮获取所有输入值。例如

$('.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
}

?>

PHP表单（带刷新）到AJAX（不刷新）

2 个答案: