Unable to jump to the page after successful ajax submission

Reprinted from: https://www.cnblogs.com/boycelee/p/6243646.html

Problem description: Because the SpringMVC framework is used, I want to use ModelAndView for page jumping. The idea is to send a POST request, and then return the corresponding ModelAndView directly in the controller layer, but this method is not feasible. So what is our solution?

Reason: Let's start with the principle of Ajax. Ajax actually sends the request object to the server through XMLHttpRequest to send an asynchronous request, obtains data from the server, and then uses JS to manipulate the DOM to update the page.

That is to say, the server-side returns a plain text stream, which can be in xml format, html format, js format, or string format, but to sum up, after the client obtains the ajax asynchronous results, it is not directly displayed on the page , but must be processed by js first,

It can only be displayed on the page after completion.

Solution:

 

<script type="text/javascript">
    $(document).ready(function() {
        $("#login_user").click(function() {
            var username = $("#login_account").val();
            var pass = $("#login_userPwd").val();
            var user = {
                number : username,
                password : pass
            };//Assemble into json format  

            $.ajax({
                type : "POST",
                url : "http://localhost:8080/iswust2hand/2hand/user/login",
                data : JSON.stringify(user),
                contentType : 'application/json;charset=utf-8',
                dataType : 'json',
                success : function(data) {

                      if (data.code == '0') {
                        window.location.href = "/iswust2hand/index.jsp";
                        alert("Welcome to the second-hand platform of Xike!");
                    }else{
                        alert("Incorrect password, please confirm and log in again!");
                    }  

                },

                error : function(data) {
                    alert("Error: " + data.code);
                }

            });

        });
    });
</script>

 

　My solution is to drop ajax

	$("#search_btn").bind("click", function() {
		$("#search_form").submit();
	});
	<form id="search_form" action="${pageContext.request.contextPath}/search" method="post">
		<input id="search_text" type="text" name="searchText" placeholder="Please enter what you want to search for...">
		<img id="search_btn" src="${pageContext.request.contextPath}/imgs/search_btn.png">
	</form>

　　

The response data of the server is divided into 3 cases

 Reprinted from: https://blog.csdn.net/b_qxzb/article/details/47066317

 

1. The response data is the result page

2. The response data is data in json format

3. The response data is data in json format, and then re-send the request

 

Note: The response data is either the result page or the data in json format, otherwise, the result page will overwrite the data in json format - resulting in the callback function of jquery's post not being executed, resulting in struts2 not jumping to the result page.

The response data is the result page

1. The response data is the result page, which means jumping to the result page.

2. The application scenario of the business is generally that querying (querying) data is to jump to the result page.

	@InputConfig(resultName = "indexInput")
	public String index() {
		return "indexSuccess";
	}

　　

The response data is data in json format

1. If the response data is in json format, then the jump is definitely not based on the result page of the struts2 configuration file - in fact, the result page is not configured at this time, otherwise the data in json format will be overwritten.

2. The application scenario of the business is,

1) Add, delete, and modify the database.

2) Refresh some data of the current page.

The response data is data in json format, and then re-send the request in the callback function of jquery post

 

　　//js code: make a request  
　　// mask layer - registration  
    function register1(){      
        // submit Form  
        var form = document.getElementById("register");  
        var param = $("#register").serialize();  
        $.post(form.action,  
               param,  
               function(json){  
                   if(json.success){                       
                       window.location = "registerSuccess.jsp"; //Initiate a new request                  
                   }else{  
                       alert("Registration failed!");  
                   }  
               },  
               "json");  
    }  

　　

code example