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

回答

相關問題