使用JavaScript和AJAX更改背景

Change background using JavaScript and AJAX

本文关键字：背景 AJAX JavaScript 使用      更新时间：2023-09-26

我有一个如下表；

<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>

我使用的是jQueryajax，我有如下脚本；

$(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文件将为i=1返回["data1*abc","data2*abc","data3*abc","data4*abc","data5*abc","data6*abc"]，为i=2返回["data7*abc","data8*abc","data9*abc","data10*abc","data11*abc","data12*abc"]等。class="title"中的文本将根据数据相应地更改，如abc或其他内容。

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

简而言之，我想更改标题单元格上方内容单元格的背景图像，以便在相应标题单元格中的数据/文本发生更改时进行更改。我如何做AJAX请求和更改背景图像（更改背景图像url）？

我想它会是这样的；

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

你可以在这里看到我的小提琴。

我通过；

$.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()' });
      }
    });
  },
});

我建议在第一个查询中发送图像路径，但可能不可能，所以这里也是设置背景图像的双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...
                }
            });
        }
    });
});
相关文章：