Home > Web Front-end > JS Tutorial > jquery ajax request method and prompting the user that it is being processed, please wait.

jquery ajax request method and prompting the user that it is being processed, please wait.

PHP中文网
Release: 2017-04-01 16:28:45
Original
1741 people have browsed it

In order to improve user experience, we usually give prompts such as "Processing, please wait!" We can achieve by setting the parameters under $.ajax() beforeS

end

(). I have not distinguished it when using $.ajax() for the first time. There is a difference between Ajax's asynchronous requests and synchronous requests. When I first started using synchronous requests, many problems appeared later, especially in terms of experience.
Asynchronous and synchronous:
Synchronization means that one section of the program can be executed before the next section can be executed. It is a blocking mode, and its phenomenon on the web page is that the browser will lock the page (i.e. The so-called page suspended state status ), the user cannot operate other and must wait for the current request to return data. With asynchronous requests, the page will not freeze.
Improve user experience:
When users submit data and wait for the page to return results, it takes time. Sometimes this waiting time is relatively long. In order to improve user experience, we usually give " Processing, please wait!" and other prompts. We can achieve this by setting the parameter beforeSend() under $.ajax(),
eg:
html key code

<p id="warning"></p>
Copy after login

js key code in the file

$.ajax(function(){
.
.
.
//省略了一些参数,这里只给出async 和 beforeSend
async: false, //同步请求,默认情况下是异步(true)
beforeSend: function(){
$(&#39;#warning&#39;).text(&#39;正在处理,请稍等!&#39;);
}
});
Copy after login

Note that if you set async: false according to synchronization, $('#warning').text('Processing, please wait!'); there will be no effect at all on the web page. If Replace $('#warning').text('Processing, please wait!'); with alert('test'); you will see a pop-up box immediately before sending the request, which means beforeSend: is executed. But if I change it to something else like $('#warning').text('Processing, please wait!'); I don't see the prompt when the request returns the result. I have been wondering about this issue for a long time, and I still don’t know what the problem is.
Change the synchronous request to an asynchronous request, and the above problem will disappear.

beforeSend: function(){
$(&#39;#warning&#39;).text(&#39;正在处理,请稍等!&#39;);
}
Copy after login

will be executed immediately.

The above is the jquery ajax request method and the content that prompts the user to wait while processing. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template