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处理，并ECHO返回一个值。

此值在AJAX代码块的success函数中接收，并调用data（称之为您喜欢的名称 - 名称在此处设置：function(data)。< / p>

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

以下是AJAX的基本示例：

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

Answer 2

我认为您对PHP和HTML的解释位置有一个基本的误解：

PHP是一种专为Web开发而设计的服务器端脚本语言（请参阅this Wikipedia article）。这意味着 PHP代码在到达浏览器之前在服务器上执行。
浏览器将HTML解释为纯文本。 浏览器中未执行任何PHP。

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

一旦它到达浏览器，你的JS就会像这样：

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

用jquery和php更新img

2 个答案: