Question

我有一张表格如下;

<table style="width: 100%; border: solid 1px #666600; min-width: 800px" cellpadding="0" cellspacing="0">
<tr>
<td id="aaa">&nbsp;</td>
<td class="content" >&nbsp;</td>
<td class="content" >&nbsp;</td>
<td class="content" >&nbsp;</td>
<td class="content" >&nbsp;</td>
<td class="content" >&nbsp;</td>
<td class="content" >&nbsp;</td>
<td id="bbb">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td class="title" >&nbsp;</td>
<td class="title" >&nbsp;</td>
<td class="title" >&nbsp;</td>
<td class="title" >&nbsp;</td>
<td class="title" >&nbsp;</td>
<td class="title" >&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

我正在使用jquery ajax，我的脚本如下;

$(document).ready( function() {
var i = 1;
$.ajax({
  type: 'POST',
  url: 'ajax.php',
  data: 'id=' + i,
  dataType: 'json',
  cache: false,
  success: function(result) {
    $('.title').each(function(index){
      values = result[index].split('*');
      indexa = values[0];
      indexb = values[1];
      if((result[index])){
        $(this).html(indexb);
      }else{
        $(this).html("&nbsp;");
      }
    });
  },
  });
});

php文件将返回["data1*abc","data2*abc","data3*abc","data4*abc","data5*abc","data6*abc"] i = 1，["data7*abc","data8*abc","data9*abc","data10*abc","data11*abc","data12*abc"] i = 2等等。class="title"中的文本相应地更改为abc 1}}或者不管它是什么..

您可以在每个标题单元格上方看到另一个单元格class="content"。我有一个php文件ajax2.php，它会返回与$_POST["data1"]和$_POST["data2"]相关的图片名称。对于每个ajax请求，$_POST["data1"]部分应具有值indexa，而$_POST["data2"]部分应具有来自javascript的值indexb。图像放在images文件夹中，php文件返回的数据只有image_name.extension。

简而言之，我希望更改标题单元格上方内容单元格的背景图像，以便在相应标题单元格中的数据/文本发生更改时进行更改。有人告诉我如何做AJAX请求并更改背景图片（更改背景图片网址）。

我认为会是这样的;

$(.content).css({ 'background-image':'url(images/' + imagename });

你可以看到我的小提琴here

提前致谢..

Answer 1

我解决了它;

$.ajax({
  type: 'POST',
  url: 'ajax.php',
  data: 'id=' + i + '&dir=' + cat,
  dataType: 'json',
  cache: false,
  success: function(result) {
    var $titles = $row.next().next().children('.title');
    var $content = $row.next().children('.content');
    var $flag = $content.children('.flag');
    $('.title').each(function(index){
      if(result[index]){
        var values = result[index].split('*'),
        indexa = values[0],
        indexb = values[1];
        $titles.eq(index).html(indexa);
        $flag.eq(index).html(indexb);
        $.ajax({
                type: 'POST',
                url: 'ajax.php?strip=1',
                data: {
                  filename: Array(indexb, cat, indexa)
                },
                cache: false,
                success: function(result2) {
                  $content.eq(index).css({ 'background-image':'url(images/' + result2 + ')' });
                },
            });
      }else{
        $titles.eq(index).addClass("null");
        $content.eq(index).css({ 'background-image':'url()' });
      }
    });
  },
});

Answer 2

我建议在第一个查询中发送图像路径，但也许这是不可能的，所以这里是设置背景图像的双重ajax请求：

$(document).ready( function() {
    var i = 1;
    $.ajax({
        type: 'POST',
        url: 'ajax.php',
        data: 'id=' + i,
        dataType: 'json',
        cache: false,
        success: function(result) {
            $('.title').each(function(index){

                if (result[index]) {
                    // you need to set these local variables only if above is true
                    var values = result[index].split('*'),
                        indexa = values[0],
                        indexb = values[1];

                    $(this).html(indexb);

                    $.ajax({
                        type: 'POST',
                        url: 'ajax.php',
                        // You set your post parameters for this query
                        data: 'data1=' + indexa + '&data2=' + indexb,
                        dataType: 'json',
                        cache: false,
                        success: function(result) {
                            // Here result will be your image path
                            // You index the content with the index of title
                            $(".content").eq(index).css("background","url(images/" + result + ")");
                        }
                    });

                } else {
                    $(this).html("&nbsp;");
                    // You may reset your background image here...
                }
            });
        }
    });
});

使用Javascript - AJAX - jQuery更改背景

2 个答案: