多个ajax返回和求和值答案

【问题标题】：Multiple ajax returns and sum values多个ajax返回和求和值
【发布时间】：2021-08-25 04:10:44
【问题描述】：

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

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

select-player.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。

showvalue.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);
    }
?>

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

我错过了什么？

【问题讨论】：

不应该让你调用查询并获取数据的函数，在你的 select-player.php 调用中，该函数将数据存储在局部变量中，并在你想要的每个地方循环遍历它
浏览器开发工具显示什么？ POST 是否真的发生了，如果是这样，id 和 total 是否被正确发送？响应如何，您是否得到 200/OK，如果是，您是否看到来自 PHP 的数据？您是否尝试在 PHP 中添加 header('Content-Type: application/json'); 以确保 JS 理解响应？
对于您的方法，更好的方法是使用单个 showvalue() 函数来确定选择了哪个玩家，例如在该函数中 $(this).attr('id') 将为您提供 id 的选择已更改。最好不要使用像 onchange="showvalue1()" 这样的内联 JS，而是在你的 JS 中使用像 $('select').on('change', showvalue); 这样的东西（而且你只需要使用这种方法）。
感谢您提出更好方法的想法，我一直在努力构建这个想法，我会先构建更长的时间，然后再增强。查看 DevTools，似乎没有发送 total，id 是。
好的，现在问题很清楚了 :-) 我已经添加了一个答案。

标签： javascript php json

【解决方案1】：

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

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

你正在使用.value检索它：

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

But .value is for inputs，而不是表格单元格中的文本，所以这不起作用。

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

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

【讨论】：