Jquery is currently a very popular JS framework, and it also provides good support for Ajax. When Ajax is used to asynchronously request data, if the server returns a list data, the usual practice is to convert the list data to JSON format data, and then return to the page, using jquery for parsing and displaying in a table requires you to be familiar with JSON parsing in JavaScript.
Here, I provide an opportunistic method to send an asynchronous request to the servlet using jquery. The servlet still uses JSP to render the result, and then JSP returns HTML to the client page, the client page directly displays data on the page through jquery. In this way, you can continue to use a jstl-Like tag library on the JSP page to display data. Example:
1. page on which the client initiates a request and displays the result: index.html
<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <br/> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> Ajax directly displays the data returned by JSP </title> <br/> <MCE: script Type = "text/JavaScript" src = "JS/jquery-1.3.2.min.js" mce_src = "JS/jquery-1.3.2.min.js"> </MCE: SCRIPT> <br/> <MCE: Script Type = "text/JavaScript"> <! -- <Br/> function dosearch () {<br/> // use ajax to send an exception request to test. Do. Insert the returned HTML file code into the element with the ID of Data <br/> $ ("# data"). Load ('test. do? '+ Math. random (); <br/>}< br/> // --> </MCE: SCRIPT> <br/> </pead> <br/> <body> <br/> <div> <br/> <input type = "button" value = "query data "onclick =" dosearch () "/> <br/> <input type =" button "value =" Clear Data "onclick =" button ('your data'{.html ('') "/> <br/> </div> <br/> <Div id =" data "> </div> <br/> </body> <br/> </ptml>
2. servlet: testservlet. Java
Package COM. qiujy. web. controller; </P> <p> Import Java. io. ioexception; <br/> Import Java. util. arraylist; <br/> Import Java. util. list; <br/> Import Java. util. random; </P> <p> Import javax. servlet. servletexception; <br/> Import javax. servlet. HTTP. httpservlet; <br/> Import javax. servlet. HTTP. httpservletrequest; <br/> Import javax. servlet. HTTP. httpservletresponse; </P> <p> public class testservlet extends httpservlet {<br/> Private Static final long serialversionuid = 1l; </P> <p> protected void doget (httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {<br/> This. dopost (request, response); <br/>}</P> <p> protected void dopost (httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {<br/> List <string> List = new arraylist <string> (); </P> <p> random = new random (); <br/> int max = random. nextint (31); <br/> for (INT I = 0; I <Max; I ++) {<br/> list. add ("Test Data" + I); <br/>}< br/> request. setattribute ("data", list); <br/> request. getrequestdispatcher ("/data. JSP "). forward (request, response); <br/>}< br/>
3. jsp: Data. jsp
<% @ Page Language = "Java" contenttype = "text/html; charset = UTF-8 "<br/> pageencoding =" UTF-8 "%> <br/> <% @ taglib uri =" http://java.sun.com/jsp/jstl/core "prefix =" C "%> <br/> <table border = "1" width = "300px"> <br/> <tr> <TD> NO. </TD> <TD> data </TD> <TD align =" center "> operation </TD> </tr> <br/> <C: foreach items = "$ {data}" Var = "str" varstatus = "vs"> <br/> <tr> <TD >$ {. count} </TD> <TD >$ {STR} </TD> <br/> <TD align = "center"> <a href = "javascript: void (0) "> modify </a> <a href =" javascript: void (0) "> Delete </a> </TD> </tr> <br/> </C: foreach> <br/> </table> <br/>
The example is relatively simple, that is, the above three main files. If the source code is required. Leave a message or go to this link to download http://download.csdn.net/source/2291129
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
