如何分別在具有相同類名的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中呈現。 但是我得到的是，每次單擊該觸發按鈕時，我都會在所有6個div中渲染ajax，而不是僅在單擊特定按鈕時才在每個特定div上渲染。

非常感謝很多人，我真的希望能做到這一點！ 干杯。

PD：這是程序員為了實現我想要達到的目標而要做的事情，但是我只是想不出這段代碼中的內容是可以單擊1按鈕並影響那個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 。 您想要發生的是弄清楚該點擊來自何處，並找到相應的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);

        }
    });
}