在使用PHP开发网页时,我们通常会遇到需要等待服务器完成任务的情况,例如上传文件、下载数据等等。在这些情况下,可视化的进度条可以给用户提供一个直观的等待反馈,使用户体验更好。而Ajax就是可以用来实现这种带进度条的异步请求的技术。
首先,我们需要准备一些前端组件,如进度条、上传组件等等。其中进度条是必要的组件。接下来,我们以上传文件为例,展示如何使用Ajax来实现进度条的效果。
//HTML代码 <form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="file" id="file"> <button type="submit">上传文件</button> </form> <!-- 进度条和上传进度 --> <div id="progress"></div> <div id="progress_num"></div>
上述HTML代码包含了一个文件上传表单和一个进度条组件。我们为上传文件的表单设置了一个指向upload.php的action,接着做出一个Ajax请求。upload.php的处理逻辑通常包含以下步骤:
//PHP 代码 //先设置文件存放路径 $upload_dir = 'uploads/'; //上传文件的真实路径 $target_path = $upload_dir . $_FILES['file']['name']; //将文件从临时目录移动到我们的上传文件夹中 if (move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) { echo json_encode(['status' =>'success']); } else { echo json_encode(['status' =>'failed']); }
这是一个简单的上传文件的PHP处理逻辑,我们在将文件移动到uploads目录后会返回一个成功或失败的信息给前端。我们可以在成功或失败后再发出一个Ajax请求来更新进度条的值。下面是用JQuery编写的Ajax代码:
//JQuery Ajax代码 $(document).on('submit', 'form', function(e) { e.preventDefault(); var form_data = new FormData($(this)[0]); $.ajax({ url: 'upload.php', type: 'POST', enctype: 'multipart/form-data', data: form_data, processData: false, contentType: false, xhr: function() { var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener('progress', function(evt) { if (evt.lengthComputable) { var percentComplete = evt.loaded / evt.total; $('#progress').css('width', percentComplete * 100 + '%'); $('#progress_num').text(Math.round(percentComplete * 100) + '%'); } }, false); return xhr; }, success: function(res) { console.log(res.status); }, error: function(error) { console.log(error); }, complete: function() {} }); });
上述代码中,我们用Form Data对象将上传表单的内容传给了PHP处理逻辑。同时,我们还将processData和contentType属性设置为false。因为在使用FormData对象时,JQuery默认把Content Type设置成application/x-www-form-urlencoded,而我们需要使用multipart/form-data, 设置为false使其自动检测Content Type。xhr属性用来获取XMLHttpRequest对象,我们在这里绑定了监听progress事件的函数,用来动态更新进度条。最后,在上述ajax请求获得处理结果后,我们可以在success回调函数内执行进一步的处理。
如此一来,我们就可以在上传文件等耗时操作时使用Ajax来实现进度条的效果,提高用户的体验。此外,在其他耗时操作中,方法也类似,只需注意调整代码逻辑即可。