时间戳

首页 > 解决方案 > 多个ajax返回和求和值

javascript - 多个ajax返回和求和值

问题描述

我有一组包含玩家列表的下拉列表。选择玩家后，他们的“价值”应出现在下拉列表旁边，并且总计应更新为所有选定玩家价值的总和。

下面的 php 代码适用于两个玩家，但我有十个，每个下拉菜单可能有十个不同的类似函数

选择播放器.php

<!--player1-->
      <tr>
        <td style="width:50%;">
            <select name="player1" id="player1" onchange="showvalue1()">
                <option disabled selected value></option>
                <?php
    $sql = "SELECT * FROM players ORDER BY value DESC";
    $result = mysqli_query($conn, $sql);
    $resultCheck = mysqli_num_rows($result);

    if ($resultCheck > 0) {
        while ($row = mysqli_fetch_assoc($result)) {
      echo "<option value='". $row['playername'] ."'>" .$row['playername'] ."</option>";
        }
    }
    ?>
            </select>
        </td>
        <td style="width:50%;" id="value1">
        </td>
      </tr>
<!--player2-->
      <tr>
        <td style="width:50%;">
            <select name="player2" id="player2" onchange="showvalue2()">
                <option disabled selected value></option>
                <?php
    $sql = "SELECT * FROM players ORDER BY value DESC";
    $result = mysqli_query($conn, $sql);
    $resultCheck = mysqli_num_rows($result);

    if ($resultCheck > 0) {
        while ($row = mysqli_fetch_assoc($result)) {
      echo "<option value='". $row['playername'] ."'>" .$row['playername'] ."</option>";
        }
    }
    ?>
            </select>
        </td>
        <td style="width:50%;" id="value2">
        </td>
      </tr>
<tr>
        <th style="width:50%";>Total</th>
        <th style="width:50%;"  id="total"></th>
      </tr>

ajax.js

function showvalue1(){
    var x = document.getElementById("player1").value;
    var t = document.getElementById("total").value;
    $.ajax({
        url:"../showvalue.php",
        method: "GET",
        datatype: 'json',
        data:{
            id : x,
            total : t
        },
        success:function(data){
            $("#value1").html(data.price);
            $("#total").html(data.newtotal);
        }
    })
}

function showvalue2(){
    var x = document.getElementById("player2").value;
    var t = document.getElementById("total").value;
    $.ajax({
        url:"../showvalue.php",
        method: "GET",
        datatype: 'json',
        data:{
            id : x,
            total : t
        },
        success:function(data){
            $("#value2").html(data.price);
            $("#total").html(data.newtotal);
        }
    })
}

我读过它jsonencode用于将数组发回，然后我可以将其分配给 js 中的 ID。

显示值.php

<?php
    include_once 'includes/dbh.inc.php';
    $pl = $_POST['id'];
    $pl = trim($pl);
    $total = 0;
    $total = $_POST['total'];
    $sql = "SELECT value FROM players WHERE playername='{$pl}'";
    $result = mysqli_query($conn, $sql);
    while($rows = mysqli_fetch_array($result)){
        $newtotal = 0;
        $value = $rows['value'];
        $newtotal = $total + $value;
        $ret = array('price'=>$value, 'newtotal'=>$newtotal);
        echo json_encode($ret);
    }
?>

没有收到任何错误或控制台返回，但也没有返回任何值。

我错过了什么？

标签： javascriptphpjson

解决方案

检查您的 HTML 源代码#total是一个表格单元格：

<th id="total"></th>

您正在使用以下方式检索它.value：

var t = document.getElementById("total").value;

但.value适用于输入，而不是表格单元格中的文本，所以这不起作用。

要获取文本，请使用 jQuery 而不是 vanilla JS（因为您的其余代码是 jQuery）：

var t = $('#total').text();

推荐阅读