带有动态 ajax 文本的按钮

Question

在我的 php 页面中，我有一排按钮，每个按钮都有一些值（本例中为 5）。这些值应发送到 ajax 脚本中，该脚本对值进行一些计算并返回每个按钮的结果，而无需重新加载主页。在这个例子中，结果将是

FRANK=5（按钮 1）

FRANK=frank（按钮 2）

FRANK=48（按钮 3）

FRANK=Bo（按钮 4）

FRANK=测试（按钮 5）

当我按下第一个按钮时，我应该在按钮上看到结果 1。当我按下下一个按钮时，我应该会在按钮上看到结果 2。

我在按钮 1 上只返回一个结果，因为所有按钮都有相同的返回值容器。我需要更多用于返回值的容器，我可以将 $i 添加到容器中：。这会给我不同的容器来返回结果。但是我如何在 javascript 中使用 $i 。我的问题也是javascript中的var x总是第一个按钮的值。我可以再次将 $i 添加到 id="x": id="x'.$i.'" 但我仍然只有 document.getElementById("x").value 来读取 javascript 中的 x 值。

希望有人帮我完成这里的代码。

主页：

include('hide-ajax-scripts.php');

$dblinjer=Array();

$dblinjer[0]['loebid']=5;
$dblinjer[1]['loebid']='frank';
$dblinjer[2]['loebid']=48;
$dblinjer[3]['loebid']='Bo';
$dblinjer[4]['loebid']='test';

$i=0;
while($i<5){
    
    $dblinjer[$i]['nrlink']='<div><button type="button" id="x" value="'.$dblinjer[$i]['loebid'].'" onclick=baadimaal("baadimaal")><span id="container"></span></button></div>';
    echo $dblinjer[$i]['nrlink'];
    $i++;
}

hide-ajax-scripts.php 包含：

<script type="text/javascript">
function baadimaal(str) {
    var x = document.getElementById("x").value; //henter værdi fra input felt med id = x
//    document.getElementById("para").innerHTML = x; //viser variablen para på pladsholder 
    
    
    
    const xhttp = new XMLHttpRequest();
    xhttp.onload = function() {
        document.getElementById("container").innerHTML =
        this.responseText; //her placeres svaret, som kommer tilbage fra hide-ajax-svar filen
    }
    xhttp.open("GET", "hide-ajax-svar.php?funk=" + str + "&para=" + x); //overfør str og x til hide-ajax-svar filen
    xhttp.send();
}
</script>

hide-ajax-svar.php 包含计算。这里将会有更多的计算和值在数据库中的存储。

<?php
if($funk=='baadimaal'){
    echo 'FRANK='.$para;
}
?>

Answer 1

您可以在函数调用中传递this，其中this 指的是当前单击的按钮。此外，您不能对多个元素使用相同的ids，而是使用class 选择器。所以，改变你的 php 代码如下：

$dblinjer[$i]['nrlink']='<div><button type="button" value="'.$dblinjer[$i]['loebid'].'" onclick=baadimaal("baadimaal",this)><span class="container"></span></button></div>';

然后，在你的函数中添加this作为参数，然后使用el.value获取被点击的按钮值，el.querySelector(".container").innerHTML在按钮被点击的span标签内添加结果。所以，改变你的 js 代码如下：

function baadimaal(str,el) {
    var x = el.value; //henter værdi fra input felt med id = x
    const xhttp = new XMLHttpRequest();
    xhttp.onload = function() {
       el.querySelector(".container").innerHTML =
       this.responseText;
    }
    xhttp.open("GET", "hide-ajax-svar.php?funk=" + str + "&para=" + x);
    xhttp.send();
}