使用ajax更改div背景 - jQuery

我有一个如下html的网页;使用ajax更改div背景 - jQuery

<head> 
<script type="text/javascript" src="jquery-1.5.1.js"></script> 
<style type="text/css"> 
#content{ 
    width: 200px; 
    height: 200px; 
    background-image: url(images/loader.gif); 
    background-position: center; 
    background-repeat: no-repeat; 
    border: #3399FF solid 2px; 
} 
</style> 
</head> 
<body> 
<div id="content">stringname</div> 
</body>

我已经设置了一个loader gif作为它的默认背景。我有一个PHP文件，ajax.php返回一个数字（或名称）相对于$_POST["filename"]。我想要的是，页面发送文本里面的div（这里stringname）和ajax将返回一个名称或编号。脚本获取此数据时，后台网址可能会更改为return_data.jpg（其中此return_data是名称或编号）。

我认为背景改变脚本是类似的;

var $cell = $('#content'); 
$cell.css('background-image', 'url(images/loader.gif)')

我该如何做这个jQuery？

在此先感谢..

blasteralfred

来源

2011-06-05 blasteralfred Ψ

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $cell = $('#content'); 
     $.ajax({ 
     type: "POST", 
     url: "ajax.php", 
     data: { 
      filename: $("#content").html() 
     }, 
     success: function(response){ 
        alert(response); 
      $cell.css("background-image", "url('/images/" + response + ".jpg')"); 
     } 
     }); 
    }); 
</script>

，不要忘记加入jQuery脚本标记您的-body-标签的底部（但还在里面呢）：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

来源

2011-06-05 08:49:35

嗨，我添加了一个建议，改变背景...看看.. :) – 2011-06-05 10:32:04

@blasteralfred - 现在看看它，它应该是很好:)也，如果你使用Chrome，你可以监控在Developer Tools中的ajax.php响应，或者使用Firebug for Firefox。如果您仍然遇到问题，请回报！ – 2011-06-05 11:07:46

不工作的家伙...... :(..你可以帮我一个忙吗？你可以写一个提示阿贾克斯回报数据的小提琴.. – 2011-06-05 11:36:35

$.ajax({ 
    ...ajax stuff... 
    url : 'urlToYourPhpFile', 
    data : { 
     whateverTheHellYouWannaSendInAnObjectLiteralForm : true, 
     floop : 'indeed' 
    }, 
    type: 'POST, GET...', 
    success: function(url) { 
     ...your usual stuff 
     $('#content').css('backgroundImage', url); 
    } 
});

http://api.jquery.com/jQuery.ajax/

来源

2011-06-05 08:38:48 Zirak

这什么东西AJAX？我是一个初学者，你可以写完整的代码.. :) – 2011-06-05 08:40:48

@blasteralfred编辑，以显示它的模拟表达...访问码头的一个非常详细的描述与吨的例子。我不知道你想要做什么以及你想做什么，所以这是我所能提供的。 – Zirak 2011-06-05 08:46:36

下面的JQuery假设ajax.php返回正是你想要你的div里面是什么。如果数据继续存在很多值，并且只希望div中有特定值，请说明标题，请考虑让ajax.php在其返回字符串上执行

json_encode()

。这将使得解析和处理javascript内容变得简单。

 
// Call this when you want to populate 
$.get('ajax.php', function(data) { 
    if(data) { 
     $("#content").html(data); 
    } 
});

来源

2011-06-05 08:42:23

使用ajax更改div背景 - jQuery

回答

相关问题