（ajax事件beforeSend）在后台处理数据时和处理完毕后传到页面上给出不同的提示

布满荆棘的人生 2022-10-02 11:53 9阅读 0赞

今天在将后台数据传递到前端页面上时，由于有时候处理数据耗时有点长，如果页面上没有提示的话，就根本不知道后台到底有没有在处理数据，所以做了个简单的提示，结果图如下：  
![20190618161619432.png][]  
（图1：表明正在解析数据，此时div为空）

![20190618161648288.png][]  
（图2：解析完毕，显示结果在下面的div中）

**之前在js里这么写的，但是显然“正在解析中…”是不会显示的。**

//js代码，ajax请求数据
    ...
    success:function(res){
    	$('.wait').html("正在解析中...");
    	if(document.readyState == "complete"){
    	        			 $('.wait').html("解析完毕!");
    	        			 }
    }

参考了[使用js或者jQuery，如何在页面加载时自动显示后台传递的数据][js_jQuery]这篇百度知道的回答。  
**使用beforeSend局部事件**  
然后代码如下：

//js代码
    $.ajax({
             ...
             ...
             beforeSend: function (XMLHttpRequest) {
            	 $(".wait").html("正在解析中...");
            	 },
             success: function (res) {
            	 ...
            	 ...
           		 if(document.readyState == "complete"){
           			 $('.wait').html("解析完毕!");
           			 }
            	 },
            error:function(e,x){
            	$('.wait').html("执行发生错误！");
            }
             });

//html部分代码
    	<div class="show-text">分析结果：<span class="wait"></span></div>
        <div id="result-box"></div>

[20190618161619432.png]: /images/20220112/4b2ac72659cc4abbab2480431dfed18a.png
[20190618161648288.png]: /images/20220112/0b988c8946f64d28a3b537251ee18132.png
[js_jQuery]: https://zhidao.baidu.com/question/1046601340010281339.html