如何在具有相同类名的 div 中单独接收 AJAX (json) 响应？

Question

我每天都变得越来越疯狂，我找不到答案，我已经花了大约 100 小时以上的时间......我希望有人能帮助我！

更新： 所以为了让自己更清楚这个问题并能够从其他人那里获得帮助，我基本上有 3 个名为“main-container”的容器，它们都有 3 个容器作为子容器，它们都具有相同的类名，当我提交按钮时，我触发了一个 ajax 函数来将来自 php 的 JSON 字符串加载到子 div 中，问题是我让 3 个“main_containers”同时加载 ajax，如果我只想加载 ajax分别按下每个“main_container”的按钮。

我也一直在使用 jquery 和 vanilla JS，但似乎我无法完成它！

这是我目前使用 jquery 触发按钮的方式：

$('.trigger_button_inside_divs').click(my_ajax_function);

这就是我的 ajax 的样子：

function my_ajax_function(){
$.ajax({
        dataType: "JSON",
        type: 'POST',
        url: test.php,
        success: function(data) {

     $('.div_to_render_JSON_1').html(data.PHP_JSON_1_RECEIVED);
     $('.div_to_render_JSON_2').html(data.PHP_JSON_2_RECEIVED);
     $('.div_to_render_JSON_3').html(data.PHP_JSON_3_RECEIVED);

        }
    });
}

HTML 看起来像这样：

<div class="main_container">
    <div class="my_div">
     //div_to_render_JSON_1
    </div>

        <div class="my_div">
          //div_to_render_JSON_2
        </div>

   <div class="my_div">
   //div_to_render_JSON_3
   </div>

   <button class="trigger_ajax_function_btn">Click to load ajax</button> //this btn loads ajax into the div class "my_div"
</div>



<div class="main_container">
    <div class="my_div">
     //div_to_render_JSON_1
    </div>

        <div class="my_div">
          //div_to_render_JSON_2
        </div>

   <div class="my_div">
   //div_to_render_JSON_3
   </div>

   <button class="trigger_ajax_function_btn">Click to load ajax</button> //this btn loads ajax into the div class "my_div"
</div>



<div class="main_container">
    <div class="my_div">
     //div_to_render_JSON_1
    </div>

        <div class="my_div">
          //div_to_render_JSON_2
        </div>

   <div class="my_div">
   //div_to_render_JSON_3
   </div>

   <button class="trigger_ajax_function_btn">Click to load ajax</button> //this btn loads ajax into the div class "my_div"
</div>

因此，总而言之，这 6 个“div”中的每一个都有一个按钮，该按钮触发包含我的 ajax 的函数以在该特定 div 中呈现。但我得到的是，每次单击该触发按钮时，我都会让 ajax 在所有 6 个 div 中呈现，而不是仅在单击特定按钮时才在每个特定 div 上呈现。

非常感谢大家，我真的希望能完成这项工作！ 干杯。

警察局： 这是程序员为实现我想要实现的目标所做的事情，但我只是无法弄清楚 这段代码中的什么是可以点击 1 按钮并影响 THAT html 元素 ，即使他们都有相同的班级。

(function(){
$("form input[type=submit]").click(function() {
    $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
    $(this).attr("clicked", "true");
});



var xhr = new XMLHttpRequest();
var el;




function SetDataInTheForm()
{
    var resp = JSON.parse(xhr.response)
    var pt=0
    var ct=0
    var gt=0

    Array.prototype.forEach.call(el.querySelectorAll(".test"),function(e,i){
        e.innerHTML=resp[i].name
    })
    Array.prototype.forEach.call(el.querySelectorAll(".p"),function(e,i){
        e.innerHTML=parseFloat(resp[i].p).toFixed(0)
        pt+=parseFloat(resp[i].p)
    })
    Array.prototype.forEach.call(el.querySelectorAll(".c"),function(e,i){
        e.innerHTML=parseFloat(resp[i].c).toFixed(0)
        ct+=parseFloat(resp[i].c)
    })
    Array.prototype.forEach.call(el.querySelectorAll(".g"),function(e,i){
        e.innerHTML=parseFloat(resp[i].g).toFixed(0)
        gt+=parseFloat(resp[i].g)
    })


    el.querySelector(".wtp").innerHTML=parseFloat(resp[0].total).toFixed(0)+" "+resp[0].unit
    el.querySelector(".wtc").innerHTML=parseFloat(resp[1].total).toFixed(0)+" "+resp[1].unit
    el.querySelector(".wtg").innerHTML=parseFloat(resp[2].total).toFixed(0)+" "+resp[2].unit

    el.querySelector(".pt").innerHTML=pt.toFixed(0)
    el.querySelector(".ct").innerHTML=ct.toFixed(0)
    el.querySelector(".gt").innerHTML=gt.toFixed(0)
}




function HandleSubmit(e)
{
    el=e.currentTarget
    e.preventDefault();
    xhr.open("POST","/url_here.php",true)
    xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
    xhr.onload=SetDataInTheForm
    var button=e.currentTarget.querySelector("input[type=submit][clicked=true]")
    button.removeAttribute("clicked")
    xhr.send($("#"+e.currentTarget.id).serialize()+"&"+button.getAttribute("name")+"=on")
}



[].forEach.call(document.querySelectorAll("._form_"),function(form){
    form.addEventListener("submit",HandleSubmit,false);
})


})()

Answer 1

请记住，$('.div_container_to_render_JSON') 是一个新的选择器，它选择具有 div_container_to_render_JSON 类的所有元素。您想要发生的事情是找出点击的来源，并找到相应的div_container_to_render_JSON。

幸运的是，jQuery 点击处理程序将 this 关键字设置为捕获点击的 HTMLElement。您可以使用它来获取父元素。

$('.your-button').on('click', function () {
  const myButton = $(this);

  $.ajax({
    // ...
    success (data) {
      myButton.parent().html(data.PHP_JSON_RECEIVED);

      // or if you need to find a parent further up in the chain
      // myButton.parents('.div_container_to_render_JSON').html(data.PHP_JSON_RECEIVED);
    }
  });
});

Answer 2

问题是您的类选择器确实同时选择了所有 div。

解决方案，为您的 div 设置标识符：

<div class="my_div" id="my_div_1">

然后你就可以使用这些 id 来填写数据了：

$('#my_div_1').html(data.PHP_JSON_1_RECEIVED);

并为您的 6 个 div 重复（注意从类选择器“.”更改为标识符选择器“#”）

Answer 3

感谢大家的回复。经过几天的努力，我终于弄明白了，这很简单..这是答案：

$('.trigger_button_inside_divs').click(my_ajax_function);


var thisButton = $(this);
var thisDiv = thisButton.closest(".main_container"); 




 function my_ajax_function(){
$.ajax({
        dataType: "JSON",
        type: 'POST',
        url: test.php,
        success: function(data) {

     thisDiv.find('.div_to_render_JSON_1').html(data.PHP_JSON_1_RECEIVED);
     thisDiv.find('.div_to_render_JSON_2').html(data.PHP_JSON_2_RECEIVED);
     thisDiv.find('.div_to_render_JSON_3').html(data.PHP_JSON_3_RECEIVED);

        }
    });
}