用 jquery 和 php 更新 img

Question

我正在尝试更新 img 封面而不使用 ajax 和 php 刷新页面，但它根本不起作用

HTML

  <div class="cover" >
  <img  id="b1"  src="<?php echo $user->picture_path();>"class="cover"/>          
                <div id="modal-cover" class="cov-lo">        </div>
   </div>

js

$('#b2').on({
    'click': function(){ 
     $('#b1').attr('src', <?php echo $user->picture_path();?> + '?' + new Date().getTime());}
});

输入和表单

   <form  action="profile.php" method="POST" enctype="multipart/form-data"  > 
            <div class="hio"> 
                                        Upload                                   <input  type="file" onchange="this.form.submit()" name="cover" id="bla2"class="custom-file-input" /> 
 </div> 
             </form>

Answer 1

Ajax 看起来更像这样：

js/jQuery:

$(document).on({'click', '#b2', function(){ 
    $.ajax({
        type: 'post',
         url: 'my_ajax_processor_file.php',
        data: '',
        success: function(data){
            $('#b1').attr('src', data);
        }
    }); //END ajax

}); //END #b2.click

my_ajax_processor_file.php：

<?php 
    $dt = new Date().getTime();
    $pp = 'get user picture path here';
    echo $pp .' - '. $pp;

请注意，您需要有一个外部 PHP 文件，我称之为 my_ajax_processor_file.php，它会执行一些额外的 PHP 处理，并且 ECHOs 返回一个值。

此值在 AJAX 代码块的 success 函数中接收，并称为 data（随意称呼它 - 名称在这里设置：function(data)。

请注意，data 变量的内容仅在该成功函数中可用。

---

以下是 AJAX 的一些基本示例：

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

Answer 2

我认为您对解释 PHP 和 HTML 的位置存在根本性的误解：

1. PHP 是一种为 Web 开发而设计的服务器端脚本语言（请参阅 this Wikipedia article）。这意味着 PHP 代码在到达浏览器之前在服务器上执行。

2. HTML 被浏览器解释为纯文本。 没有在浏览器中执行 PHP。

因此，一旦 JS 到达浏览器，echo $user->picture_path(); 已经被执行并被浏览器解释为纯文本。

你的 JS 在浏览器上会如下所示：

$('#b2').on({
    'click': function() {
        $('#b1').attr('src', '/the/path/to/the/picture' + '?' + new Date().getTime());
    }
});