如何使用JavaScript / jQuery仅刷新PHP头文件？

Question

我只需要使用JavaScript / jQuery重新加载头文件，而不重新加载整个页面。 我的代码如下。

<?php
 require_once('include/listspace_header.php');
?>
<div class="popover-content">
<p>                            
<select class="chosen-select text-left" style="width:100%;"  onchange="setCountry();" id="conid">
<option value="" selected>Select Country</option>
<?php
    foreach ($country as $v) {
?>
<option value="<?php echo $v['country_id']; ?>"><?php echo $v['country_name']; ?></option>
<?php
 }
?>
</select>
</p>
</div>

在这里，我只需要使用JavaScript / jQuery重新加载include/listspace_header.php页面，而不是整个页面。

Answer 1

简单地将其放在div中，例如：

在listspace_header.php内部：

echo '<div id="headerReload">';
----- LISTSPACE_HEADER.PHP CONTENT -----
echo '</div>';

然后使用load()方法再次获取文件，最有可能包含更新的数据？ 像这样：

$(".chosen-select").change(function() {
    $(".headerReload").load('include/listspace_header.php');
)};

编辑：

好吧，我上面提供的代码很可能会导致div id="headerRealod"永远加倍，增加三倍并永远相乘，所以我认为最好在基本文件中的php require_once代码周围设置该div标记。

Answer 2

您正在尝试从JavaScript触发php代码。 一旦HTTP数据发送到客户端浏览器，就无法使用JavaScript告诉使用服务器端包含的PHP重载文件并更新已经发送到客户端浏览器的网页部分。 相反，您将使用Ajax来获取listspace_header.php文件的内容并将其动态推送到标题中。

这是下面使用jquery的示例

<div id='header'>
<?php
 require_once('include/listspace_header.php');
?>
</div>

<button id='reloadHeader'>Reload Header</button>

<div class="popover-content">
<p>                            
<select class="chosen-select text-left" style="width:100%;"  onchange="setCountry();" id="conid">
<option value="" selected>Select Country</option>
<?php
    foreach ($country as $v) {
?>
<option value="<?php echo $v['country_id']; ?>"><?php echo $v['country_name']; ?></option>
<?php
 }
?>
</select>
</p>
</div>

jQuery查询

$(document).ready(function(){

//Button Click Event to Reload header file 
 $('#reloadHeader').click(function(){

  //Send Ajax Request to get the contents of header file 
  $.ajax({url: "include/listspace_header.php", success: function(result){
     $('#header').html(result);
  });  

 });

});