如何使用ajax並更新img src並調用php函數？

Question

有一個複選框列表。用戶點擊「未選中的複選框」的圖像。 Ajax向php腳本發送請求，該腳本更新數據庫和echo的「檢查複選框」的新圖像源。這工作得很好，並低於：

HTML：

<a href="" class="markBox" id="<?php echo $box->id ?>" name="markBox"><img src="<?php echo ($box->complete == 1) ? "/images/checkbox-filled.png" : "/images/checkbox-empty.png" ?>" id="checkbox-<?php echo $box->id ?>" /></a> 

markBox.js：

 $.ajax({ 

      type: "POST", 
      url: "/scripts/markBox.php", 
      data: data, 
      cache: false, 

      success: function(imageSource) { 
       image.attr('src', imageSource); 
      } 
     }); 

markBox.php：

//Return result 
    if ($box->complete == 1) 
     echo "/images/checkbox-filled.png"; 
    else 
     echo "/images/checkbox-empty.png"; 

    exit; 

所面臨的挑戰是，我有PHP函數，在複選框列表的上方調用，以向用戶顯示框被檢查的方式以及有多少框不被檢查。我想要這個盒子被調用，並且像圖片那樣刷新。 ajax回來後，如何重新運行php函數以重新運行？

HTML：

  <div class="markBox"><?php echo $results->getCountComplete() ?> Complete</div> 
     <div class="markBox"><?php echo $results->getCountNotComplete() ?> Incomplete</div> 

Answer 1

你不需要阿賈克斯所有：（除非你不想你的數據存儲到數據庫或文件）：我希望這有助於：

http://jsfiddle.net/teeEx/

HTML：

<a href="javascript:;" id="check1"><span class="checked">&nbsp;</span></a> 
<a href="javascript:;" id="check2"><span class="unchecked">&nbsp;</span></a> 
<a href="javascript:;" id="check3"><span class="unchecked">&nbsp;</span></a> 

<div id="result"></div> 

CSS：

個

a{ 
    text-decoration: none; 
} 
span{ 
    display: block; 
    width: 30px; 
    height: 30px; 
    margin: 20px; 
} 
span.checked{ 
    background: green; 
} 
span.unchecked{ 
    background: black; 
} 

JS：

$('a').click(function(){ 
    var a_obj = $(this); 
    var obj = a_obj.children('span'); 
    if(obj.is('.checked')){ 
    obj.removeClass('checked').addClass('unchecked'); 
    } else { 
    obj.removeClass('unchecked').addClass('checked'); 
    } 

    var all = a_obj.parent(); 
    var countChecked = all.find('span.checked').length; 
    var countunChecked = all.find('span.unchecked').length; 
    $('#result').html('checked '+countChecked+'; unckecked: '+countunChecked); 
});