Page ajax Initiate a request ,controller Receive and process data
this time ajax To access html How to configure
to configure yml file ：
And then in the src/main/webapp Next, create one html page
establish controller：
Run the project to access the index.html：
introduce jquery：
modify index.html page ：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title
here</title> <script src="js/jquery-1.8.3.js"></script> <script> $(function(){
$("#s").click(function(){ var ins=$("#ins").val(); $.ajax({
url:"/r",// Server to request url
data:{ins:ins},// first name It corresponds to the back end request.getParameter("name") Of name, the second name The corresponding is this js In var
name = $("#name").val(); Of name async:true,// Is it an asynchronous request cache:false,// Cache results
type:"POST",// Request method dataType:"text",// What type of data does the server return text xml javascript
json(javascript object ) success:function(result){// The function executes after the server executes successfully ,result Is the result returned by the server
console.log(result); $("#re").html(result); }, error:function(jqXHR,
textStatus, errorThrown) { } }); }); }); </script> </head> <body>
<h1> I am html page </h1> <input type="text" id="ins" /> <button id="s"> launch ajax</button>
<span id="re"></span> </body> </html>
Then write another one controller To receive ：
// Because the implementation of the page is to click the button to launch ajax Request incoming input Input content , So here's a way String Type ins parameter ,
// We need to start with ajax In the method data Of : It's the same name as before // and @ResponseBody Yes indicates that the method returns a parameter of type json format
@RequestMapping("/r") @ResponseBody public String r(String ins) { String s="";
if(ins.equals("")) { s=" Input cannot be empty "; }else { s=ins; } return s; }
Run the test ：
Technology