如何使用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); 
});