我怎样才能发送一个php；“回声”；通过Ajax？

我有一个带有进度条的上传程序：

index.php

：

<h1>Uploader</h1>
<hr>
<form action="#">
    <input type="file" name="image" >
    <button class="btn btn-sm btn-info upload" type="submit">Upload</button>
    <button type="button" class="btn btn-sm btn-danger cancel">Cancel</button>

    <div class="progress progress-striped active">
        <div class="progress-bar" style="width:0%"></div>
    </div>
</form>


<script>

    $(document).on('submit','form',function(e){
        e.preventDefault();

        $form = $(this);

        uploadImage($form);

    });

    function uploadImage($form){
        $form.find('.progress-bar').removeClass('progress-bar-success')
                                    .removeClass('progress-bar-danger');

        var formdata = new FormData($form[0]); //formelement
        var request = new XMLHttpRequest();

        //progress event...
        request.upload.addEventListener('progress',function(e){
            var percent = Math.round(e.loaded/e.total * 100);
            $form.find('.progress-bar').width(percent+'%').html(percent+'%');
        });

        //progress completed load event
        request.addEventListener('load',function(e){
            $form.find('.progress-bar').addClass('progress-bar-success').html('upload completed....');
        });

        request.open('post', 'upload.php');
        request.send(formdata);

        $form.on('click','.cancel',function(){
            request.abort();

            $form.find('.progress-bar')
                .addClass('progress-bar-danger')
                .removeClass('progress-bar-success')
                .html('upload aborted...');
        });

    }

</script>

到目前为止，这是非常有效的。 我在我的页面上看不到“hello world”。我试图改变这一行：

   $form.find('.progress-bar').addClass('progress-bar-success').html('upload completed....');
            });

进入：

---

但我仍然看不到“hello world”是异步的。您需要定义

onreadystatechange

以捕获响应：

request.onreadystatechange = function () {
  if (request.readyState === 4 && request.status === 200) {
    //here you have your "hello word"
    alert(request.responseText);
  }
}

---

我将此添加到您的代码

request.open（“GET”，“upload.php”）；request.send（）然后它工作了：）
   $form.find('.progress-bar').addClass('progress-bar-success').html('upload completed....');
alert(data);
            });

request.onreadystatechange = function () {
  if (request.readyState === 4 && request.status === 200) {
    //here you have your "hello word"
    alert(request.responseText);
  }
}