填写< td>与一个jQuery的ajax调用 [英] Fill a <td> with a jquery ajax call

问题描述

我正在尝试对一系列的每一个进行ajax调用，并用ajax调用中的处理后的数据替换td的内部html.

I'm trying to make an ajax call for each of a series of 's and replace the inner html of the td with processed data from the ajax call.

当我被锁定到一个电子商务cms系统时，我的ajax调用是一个完整的页面，其中包含以下字符串: **！#249,00！#349,00 **！#5 ltr！#**

As I'm locked to an ecommerce cms system my ajax call is a complete page with the following string: **!#249,00!#349,00**!#5 ltr!#**

下面的代码将其拆分为:
var pprices = [''，'249,00'，'349,00'];
var plabels = [''，'5 ltr'，''];

the code below splits this to:
var pprices = ['','249,00','349,00'];
var plabels = ['','5 ltr',''];

注意:pprices中的数字使用逗号而不是句号.

Note: the numbers in pprices uses comma instead of full stop.

问题在于最后一行:$(this).html(endprice); 用默认值"999999"而不是新值填充单元格.似乎该行是在ajax调用完成之前执行的.

The problem is that the last line: $(this).html(endprice); fills the cell with the default value '999999' and not the new value. It seems that the line is executed before the ajax call is completed.

如何确保在for循环中找到的数据发送到td?

我当前的代码是这样:

  $(".pricetag").each( function() {
  var pgroup = $(this).attr('group');
  var plink = "Default.aspx?ID=14&groupid=" + pgroup + "&mode=-1";
  var endprice = "999999";
  var endlabel = "";
  $.ajax({url:plink,done:function(result){
    pprices = result.split("**")[1];
    plabels = result.split("**")[2];
    prices = pprices.split("!#");
    labels = plabels.split("!#");
    for(i=0;i<prices.length;i++) { 
        j=parseInt(prices[i]); k=parseInt(endprice); 
        if(j!=0 && j<k) { endprice = prices[i]; endlabel = labels[i]; }}
  }});
  $(this).html(endprice);
  });

HTML:

<table><tr>
  <td> label </td>
  <td class="pricetag" group="<!--@Ecom:Group.ID-->"> price </td>
</tr></table>

The:<！-@ Ecom:Group.ID->从电子商务系统中获取ID.

The: <!--@Ecom:Group.ID--> fetches an id from the ecommerce system.

推荐答案

在jQuery.ajax文档中，我觉得done:是有效的设置.我想您想使用success:或对$ .ajax()返回的jqXHR对象调用done().

Looking at the jQuery.ajax documentation, it doesn't look to me like done: is a valid setting. I think you want to use either success: or call done() on the jqXHR object returned from $.ajax().

也就是说，您的假设是正确的，即该行在ajax调用完成之前就已执行"……您需要将该行移至成功处理函数中，例如:

That said, you are correct in your assumption that 'the line is executed before the ajax call is completed'... you need to move that line into your success handler function, something like:

$.ajax({url:plink,
        context: $(this),
        success:function(result){
            pprices = result.split("**")[1];
            plabels = result.split("**")[2];
            prices = pprices.split("!#");
            labels = plabels.split("!#");
            for(i=0;i<prices.length;i++) { 
                j=parseInt(prices[i]); k=parseInt(endprice); 
                if(j!=0 && j<k) { endprice = prices[i]; endlabel = labels[i]; }}
            $(this).html(endprice);
       }});

请注意，我添加了上下文设置，以便从each()传入this，以便成功函数使用正确的this.

Note that I added the context setting, to pass in this from the each(), so that the success function is working with the right this.

我没有对此进行测试.但我认为它应该起作用.如果遇到问题，您可能需要检查 jQuery.ajax()文档.

I didn't test this. but I believe it should work. You may want to check the jQuery.ajax() docs if you have trouble.

这篇关于填写&lt; td&gt;与一个jQuery的ajax调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！