JQuery + AJAX + Struts implement refreshing pagination

JQuery + AJAX + Struts implement refreshing pagination

JQuery + AJAX + Struts implement refreshing pagination

Note:

1. jQuery plug-in js files are required;

2. Use myeclipse to add struts capabilities;

Before sending an Ajax request from a client page to the server, you must first create the XMLHttpRequest object in js. After the object is created, use OPEN ('get/Post', URL, synchronous/asynchronous) set the submission method and URL address, synchronous or asynchronous. Then, use send (data) to send data to the server, and use onreadystatechange to bind the callback function. If you submit data using the GET method, splice the data directly in the URL address. If you use the POST method, you must first set the request header setRequestHeader (Content-Type, application/x-www-form-urlencodeed), and then use the send () method to send data. In the callback function, you also need to determine whether the current status has been completed (readyState = 4), whether the server has returned (status = 200), and then perform corresponding processing. The whole process is very troublesome, And the XMLHttpRequest created will be different based on the browser, which is very troublesome.

It is very convenient to use the ajax (option) That jQuery provides for us. Just do this:

 

$.ajax({   type: POST,   url: RegService.do,   data: name=John&location=Boston,   dataType:'json',   success: function(msg){     alert( Data Saved:  + msg );   }});

 

Type specifies whether to submit data through post or get. The url is the URL address of the data submitted to the server, and the data is the data submitted to the server, if the get method is used, you can also splice the data in the URL address. dataType indicates the organization of the data returned by the server, and success indicates the callback function when the data is successfully returned. You can also use jQuery. get (url, [data], [callback]). This is a simple GET request function to replace complex $. ajax. You can call the callback function when the request is successful. JQuery. getJSON (url, [data], [callback]) loads JSON data through http get requests. JQuery. post (url, [data], [callback]) is a simple POST Request function to replace complex $. ajax. You can call the callback function when the request is successful. JQuery. getScript (url, [callback]) loads and executes a JavaScript file through an http get request. For example: $. getScript (test. js, function (){

Alert (Script loaded and executed .);

 

 

JQuery's ajax paging process:

 

 

Steps:

 

1. Create a web project under myeclipse;

 

2. Add struts capabilities to the project;

 

 

3. Configure the web. xml and struts. xml configuration files;

 

Struts. xml configuration

 

Web. xml configuration: the struts part can be automatically generated.

 

4. Create two jsp pages: index. jsp and userlist. jsp;

 

 

5. Compile the index page, initialize the body, and add a tag a to jump to userlist. jsp;

 

The indexOnload () function is in index. js.

The onlineAjax () method is in ajax. js

 

The sendJqueryAjax () method is in jqueryAjax. js.

 

BaseAction. java Core Content

 

 

6. Compile the userlist. jsp page and add the table and other content displayed in the data;

7. Compile js Code and display it by page using jQuery's ajax function;

 

8. Create an action as the URL of the ajax request;

 

 

9. Write a callback function on the userlist. jsp page to display the data to the current page;

 

Javascript code in userlist. jsp

 

10. Add the previous page and the next page to implement the paging capability;

Page content added by userlist. jsp

Test: run the project