在下面给出的代码中，我使用中继器字段来存储图像链接和排名。在前端，我试图实现这样的功能：当我为图像选择不同的等级并单击update rank按钮时，页面应该更新数据库中的等级，并用新的等级重新加载页面。然而，当点击任何按钮时，代码都会完全删除排名。在进行故障排除时，我发现document.write没有将值传递给函数。下面给出的是我的代码：
<form id="myform" name="myform" action="" method="POST" >
<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12 ">
<?php
global $post;
$bookid=get_the_title($post->ID);;
$args = get_posts(array('post_type' => 'bookgallery' ,'post_title' =>$bookid, 'posts_per_page' => -1
));
?>
<?php
foreach ( $args as $post ) : setup_postdata($post);
if (!empty($post))
{
$allimg=$allrank=array();
while( have_rows('imgs') ): the_row();
$temprank=get_sub_field('rank',$post->ID);
$tempimg=get_sub_field('imglink',$post->ID);
$allimg[]=$tempimg;
$allrank[]=$temprank;
if ($temprank=='1st') {
$rank1img= $tempimg;
$rank1='1st';
}
if ($temprank=='2nd') {
$rank2img= $tempimg;
$rank2='2nd';
}
if ($temprank=='3rd') {
$rank3img=$tempimg;
$rank3='3rd'
}
endwhile;
if (!empty($rank1img)){
?>
<div >
<img src="<?php echo $rank1img; ?>" alt="" >
<div >1st
<select name="rank1">
<option value="0"> </option>
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
<option value="4">act</option>
</select>
</div>
<div ><input type="submit" name="rank1btn" value="update rank" id="rank1btn" onclick="document.write('<?php updatemypage($rank1img,$_POST['rank1']); ?>')" ></div>
</div>
<?php }
if (!empty($rank2img)){
?>
<div >2nd
<img src="<?php echo $rank2img; ?>" alt="" >
<div >
<select name="rank2">
<option value="0"> </option>
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
<option value="4">act</option>
</select>
</div>
<div ><input type="submit" name="rank2btn" value="update rank" id="rank2btn" onclick="document.write('<?php updatemypage($rank2img,$_POST['rank2']); ?>')" ></div>
</div>
<?php }
if (!empty($rank3img)){
?>
<div>3rd
<img src="<?php echo $rank3img; ?>" alt="" >
<div>
<select name="rank3">
<option value="0"> </option>
<option value="1">1st</option>
<option value="2">2nd</option>
<option value="3">3rd</option>
<option value="4">act</option>
</select>
</div>
<div><input type="submit" name="rank3btn" value="update rank" id="rank3btn" onclick="document.write('<?php updatemypage($rank3img,$_POST['rank3']); ?>')" ></div>
</div>
<?php }
?>
}
}
endforeach; ?>
</article>
</form>
<?php
function update_ranks($newimgurl,$newrank){
switch ($newrank)
{
case "1":
$rank="1st";
break;
case "2":
$rank="2nd";
break;
case "3":
$rank="3rd";
break;
}
$field_key = "field_582fdg46";
$value=array();
$count=0;
global $totalimgs;
global $allimgurl;
global $allimgranks;
while ($count < $totalimgs){
if ($allimgurl[$count]==$newimgurl){
$value[] = array("imglink" => $newimgurl,"rank" => $rank );
}
else{
$value[] = array("imglink" => $allimgurl[$count],"rank" => $allimgranks[$count] );
}
$count=$count+1;
update_field( $field_key, $value, $post->ID);
}
unset($newrank,$newimgurl,$currentnewrank,$rank,$count);
unset($allimgurl,$allimgranks,$totalimgs,$value);
}
?>
评论说明了一切，但我会总结一下。PHP作为服务器端语言在代码到达浏览器之前进行评估，另一方面，javascript作为客户端语言只有在浏览器从服务器接收到信息后才会执行。要使用javascript调用php函数，您需要发出异步请求（如果您至少不想重新加载页面）。Ajax请求示例（来自http://www.w3schools.com/php/php_ajax_php.asp)：
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "gethint.php?q=" + str, true);
xmlhttp.send();
此外，在php代码中，您还需要一个返回所需信息的函数，该函数名为if($_GET['q'] ==...){//your function here}