Ajax global events in jquery and the use of NProgress

Now I want to achieve such a requirement: when there is an ajax request sent on the page, we hope to give the user a waiting prompt to remind the user that the user is currently operating. This function is very useful when the network speed is relatively slow.

How to achieve this requirement?

  • You may think: use before to achieve, in the before method, you can display the prompt element. Wait until the request is successful, then hide the prompt element. This approach can be achieved, but there is a problem. When there are many ajax requests on the page, we need to add the code to display the prompt element in the code of each request, and the code repetition rate is relatively high
  • jQuery provides ajax global events to solve this problem

1. Global events

Only when an ajax request is sent on the page, the corresponding global event will be triggered

insert image description here
insert image description here

2. Use of NProgress

This is a small progress bar plugin on websites like youtube and Medium. Nanoscale progress bars, trickle animations tell your users that something is happening!

Great for Turbolinks, PJax or other Ajax intensive applications.

insert image description here

insert image description here
insert image description here

Guess you like

Origin blog.csdn.net/weixin_47505105/article/details/123457638