如何通過Ajax將數據發送到不同的元素？

Question

的script.js

$(document).on("click", ".send", function (event) { 
    $.ajax({ 
      url: "update.php", 
      data: { 
       id: id, 
      }, 
      type: "POST", 
      success: function (data) { 
       $(".blue").html(data); 
       $(".red).html(data); 
      } 
     }) 
}); 

update.php

echo "this text should go to blue"; 
echo "this text should go to red"; 

的index.php

<button class="send">Send</button> 
<div class="blue"></div> 
<div class="red"></div> 

在一個Ajax請求我想將數據發送到兩個不同的div。我不知道如何解決這個問題。或者如果這可能？我嘗試了兩個不同的Ajax請求。但是因爲我需要從數據庫中獲取數據，這會導致衝突。

---

這裏根據建議，更新後的代碼：

$(".send").click(function(){ 
     $.ajax({ 
      url: "update.php", 
      data: {}, 
      type: "POST", 
      success: function (data) { 
       $(".blue").html(data.blue); 
       $(".red").html(data.red); 
        alert("success"); 
      } 
     }) 
}); 

update.php

$array['blue'] = "blue content"; 
$array['red'] = "red content"; 
header('Content-type: application/json'); 
echo json_encode($array); 

---

UPDATE：

這樣的代碼工作：

Update.php

$array['blue'] = "blue content"; 
$array['red'] = "red content"; 
//header('Content-type: application/json'); 
echo json_encode($array); 

素文字：

$.ajax({ 
      url: "update.php", 
      data: {}, 
      type: "POST", 
      success: function (data) { 
       //$(".blue").html(data.blue); 
       //$(".red").html(data.red); 
       $(".red").html(data); 
        alert("success"); 
      } 
     }) 

然後我的結果紅格爲：

{"blue":"blue content","red":"red content"} 

Answer 1

從服務器將數據打包爲JSON，並解壓在客戶端。

簡單的例子：

update.php

$array['blue'] = "blue content"; 
$array['red'] = "red content"; 
header('Content-type: application/json'); 
echo json_encode($array); 

的script.js

$(document).on("click", ".send", function (event) { 
    $.ajax({ 
      url: "update.php", 
      data: { 
       id: id, 
      }, 
      type: "POST", 
      success: function (data) { 
       $(".blue").html(data.blue); 
       $(".red").html(data.red); 
      } 
     }) 
}); 

Answer 2

也是另一種可行的解決方案

var jsonUrl = 'update.php'; 
     $.ajaxSetup({ 
      cache: false 
     }); 
     $.ajax({ 
      type: 'GET', 
      url: jsonUrl, 
      data: {}, 
      dataType: 'json', 
      success: function (data) { 
       $('.blue').html(data.blue); 
       $('.red').html(data.red); 
      }, 
      error: function (xhr) { 
       $('.red').html('error fetching data'); 
      } 
     });