Question

我是Coding的新手，我在数小时内遇到了问题：

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

首先，您点击＆＃34;点击＆＃34;处理程序只是在单击变量时递增变量。它完全没有触及输出。

其次，每次运行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>');
}

AJAX jQuery通过Button Click

1 个答案: