SpringMVC + Ajax + concatenate html string instance code, springmvcajax
Why write this. Because in the current webpage. The amount of data transmitted through synchronization has become very small. Most data is transmitted asynchronously through Ajax. Therefore, SpringMVC + Ajax is used as a simple example to help you splice strings for display. Hope to help you.
In this case, the configuration is still based on SpringMVC's simple addition, deletion, modification, and query (SSM integration), and then assists in configuring Jackson's jar package.
Server
@ RequestMapping ("/ajaxlist") @ ResponseBody // (springmvc's Jackson annotation returns a json string) public List <User> getUserList () {List <User> list = userService. findAll (); return list ;}
Frontend use
<Body> <button id = "testButton"> asynchronous transmission </button> <div id = "content"> </div> </body>
Ajax request and concatenate strings
<Script type = "text/javascript"> $ (function () {$ ("# testButton "). click (function () {$. ajax ({url: "$ {pageContext. request. contextPath}/user/ajaxlist ", type: 'get', dataType: 'json', success: function (data) {// concatenated string var html = "<table> <tr> <td> User Name </td> <td> password </td> <td> nickname </td> <td> email </td> </tr> "; for (var I = 0; I <data. length; I ++) {html = html + "<tr>" + "<td>" + data [I]. username + "</td>" + "<td>" + data [I]. password + "</td>" + "<td>" + data [I]. nickname + "</td>" + "<td>" + data [I]. email + "</td>" + "</tr>";} html = html + "</table>"; $ ("# content "). append (html) ;}}) ;}); </script>
In fact, during the writing process, when I used firebug debugging, I found that jQuery files could not be obtained. I always thought it was a path problem. After confirming that the path is correct, I found that, I have not configured static resource ing. After configuring static resource ing, it will be OK.
Frontend display result
Of course, it is not very beautiful here, if you need to look beautiful. You can introduce Bootstrap or other frameworks to beautify the style.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
