Jump page problems encountered in the use of Ajax+SpringBoot+Thymeleaf

Foreword: I encountered a problem this week when using Ajax+Thymeleaf, tossed me for a long time, and recorded it here

Jump page problems encountered in the use of Ajax+SpringBoot+Thymeleaf

Problem Description

My purpose: get the data through Ajax, and render the View through the Model, realize the jump page and render the data
But... Ajax gets the data and sends it back to the server, but the page cannot be jumped.

This problem has troubled me for a while, mainly because I just thought that the page data was not refreshed, and I didn't find that the page didn't jump at all...

HTML
Please add image description
JS (Ajax)
Please add image description
Controller layer
insert image description here

Solution

After realizing that this is the problem that the page cannot be jumped, I tried to see if the redirection can make the page jump, but the result is still not working.

Finally, I turned to the all-powerful Baidu and found that the reason why the page could not be jumped turned out to be:
ajax can only achieve partial refresh, and cannot perform the overall page jump and carry data

Uh... I know the concept that Ajax can only be partially refreshed before, and this can even be said to be one of its main advantages, because there is no need to refresh the page as a whole...

Well, the reason is figured out, but why does the redirect also fail?

I tested it again and found that I pressed F12 on the browser side to check whether the network request was successful. It responded with a 302 status code. The response to the 302 status code means that the backend redirection worked, but because it is an ajax request, the page is still the same. page.

The same reason:
because the ajax request is an asynchronous request and a partial refresh method, it is impossible to jump to other pages using redirection . If you want to jump to a page, you need to use location.href to jump on the front end.

Solution: Change the Ajax request to a form form to realize page jump

PS: You can also go to my personal blog to see more content
Personal blog address: Xiaoguan classmate's blog

Guess you like

Origin blog.csdn.net/weixin_45784666/article/details/121450116