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

你根本不需要ajax :(除非你不想将数据存储到数据库或文件中）：我希望这会有所帮助：

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);
});

如何使用ajax并更新img src并调用php函数？

1 个答案: