javascript - AJAX jQuery 通过按钮单击响应进行迭代

Question

我是编码新手，在解决这个问题时我被困了几个小时:

AJAX 的响应是一个 Json 二维数组 jqXHR[][] 第一个索引描述每个产品 ID，第二个包含产品详细信息，例如价格等。所以我想要的就是使用按钮“New_Suggestion”迭代第一个索引并更新“result_wrapper”中的html内容。

响应工作正常，但更新 html 内容根本不起作用。

感谢您的帮助。

$.ajax({
  type: "POST",
  url: "productsuggestion.php",
  data: "criteria1=" + crit1 + "&criteria2=" + crit2 + "&criteria3=" + crit3 + "&criteria4=" + crit4 + "&criteria5=" + crit5,
  dataType: "json",
  success: function(jqXHR) {

    var sug = 0;

    $('#New_Suggestion').on('click', function() {

      sug = sug + 1

    });


    $("#result_wrapper").html(
      '<div id="prod_name">' + jqXHR[sug][0] + '</div> <br>' +
      '<img id="prod_pic" src="' + jqXHR[sug][4] + '">' +
      '<div id="prod_price">' + jqXHR[sug][2] + '</div> <br>'
    );
  }

});

Answer 1

首先，您的“单击”处理程序仅在单击时递增变量。它根本不影响输出。

其次，每次 ajax 运行时，您都会向按钮添加另一个单击事件处理程序，而无需删除之前的处理程序。在 ajax 上下文之外声明它并为建议计数设置一个全局变量会更容易。

我认为是这样的(未经测试):

var sugCount = 0;
var sugData = null;

$.ajax({ 
  type : "POST",
  url  : "productsuggestion.php",
  data : "criteria1="+crit1+"&criteria2="+crit2+"&criteria3="+crit3+"&criteria4="+crit4+"&criteria5="+crit5,
  dataType: "json",
  success: function(data){
    //reset global data after each ajax call
    sugCount = 0; 
    sugData = data;
    writeSuggestions(sugCount, sugData); //output the initial set of suggestions
  }
});

$('#New_Suggestion').on('click',function(){
  sugCount = sugCount + 1;
  writeSuggestions(sugCount, sugData); //output updated suggestions
});

function writeSuggestions(count, data)
{
  $("#result_wrapper").html('<div id="prod_name">'+data[count][0]+'</div> <br>'+
                    '<img id="prod_pic" src="'+data[count][4]+'">'+
                    '<div id="prod_price">'+data[count][2]+'</div> <br>');
}