Ajax calls the background action to return the JSONArray (JSONObject) type for dynamic display of the drop-down list in jsp, ajax. actionlink

Ajax calls the background action to return the JSONArray (JSONObject) type for dynamic display of the drop-down list in jsp, ajax. actionlink

I. Description

Now there is a jsp page with a school and a class drop-down list. The list of classes is displayed only after the school is selected, therefore, Ajax is used to return a key-value pair of the ArrayList type, which is displayed in the list of classes. effect 1 is shown in the following figure:

Ii. Source Code

1. main. jsp main source code

<% @ Page language = "java" contentType = "text/html; charset = UTF-8 "pageEncoding =" UTF-8 "%> <% @ taglib prefix =" s "uri ="/struts-tags "%> <% @ taglib prefix =" c "uri = "http://java.sun.com/jsp/jstl/core" %> <! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> 

2. The boardCollect. js source code of Ajax is called in the same directory introduced by jsp.


// Create a request var http_request; function createXMLHttpRequest () {http_request = false; if (window. XMLHttpRequest) {http_request = new XMLHttpRequest (); // initialize http_requestif (http_request.overrideMimeType) {http_request.overrideMimeType ("text/html");} else if (window. activeXObject) {try {http_request = new ActiveXObject ("Msxml2.XMLHTTP"); // create an XMLHttpRequest object in IE, new version IE} catch (e) {try {http_request = new ActiveXObject ("Microsof T. XMLHTTP "); // create the XMLHttpRequest object earlier version IE} catch (e) {}} if (! Http_request) {window. alert ("XMLHttpRequest object instance cannot be created"); return false ;}// display the class list var comlist; function showClass () {// click "school" to display the list of all classes in the school. // window. alert ("showClass"); var school = document. getElementById ("schoolCircle "). value; // alert (school); if (school = 0) {var htmlList = '<select name = "classCircle" id = "classCircle">' + '<option value = "0"> -- class list -- </option> '; document. getElementById ("classCircle "). innerH TML = htmlList;} else {showOptions ("findClassList1.action? School = "+ school);} // showComments ("/modules/forum/frontForum/forumAll/boardCollect. action? McpForumBoard. boardId = "+ id);} function showOptions (url) {createXMLHttpRequest (); // window. alert (url); // specifies the event Releaser for processing functions !!! Http_request.onreadystatechange = processRequest; http_request.open ("GET", url, true); http_request.send (null);} // function processRequest () {// window. alert (http_request.readyState); if (http_request.readyState = 4) {// window. alert (http_request.status); if (http_request.status = 200) {var classList = eval ('+ http_request.responseText +'); // var classList = com. classList; // alert (classList. length); var htmlList = '<select name = "classCircle" id = "classCircle"> '; htmlList + = '<option value = "0"> -- class list -- </option>'; for (var I = 0; I <classList. length; I ++) {var circle = classList [I]; // alert (circle ["CIRCLE_ID"]); htmlList + = '<option value = "' + circle [" CIRCLE_ID "] + '">' + circle ["CIRCLE_NAME"] + '</option>';} document. getElementById ("classCircleTD "). innerHTML = htmlList ;}}}





3. source code of the background action processing class called by Ajax in boardCollect. js

// Search for the public List of all classes in the selected school <Map> findClassList1 () {HttpServletResponse response; response = ServletActionContext. getResponse (); response. setContentType ("text/json; charset = UTF-8"); response. setHeader ("Cache-Control", "no-cache"); response. setHeader ("Pargma", "no-cache"); PrintWriter out; try {out = response. getWriter (); JSONArray returnArticles = new JSONArray (); if (school = null | school. length () = 0) {return null;} else {String SQL = "select CIRCLE_ID, CIRCLE_NAME from dersp_circle, dersp_school_class_relation" + "where class_id = circle_id and school_id =" + school; system. out. println ("SQL:" + SQL); List <Map> list = jdbcTemplate. queryForList (SQL); for (int I = 0; I <list. size (); I ++) {JSONObject js = new JSONObject (); try {js. put ("CIRCLE_ID", list. get (I ). get ("CIRCLE_ID"); js. put ("CIRCLE_NAME", list. get (I ). get ("CIRCLE_NAME"); returnArticles. put (js);} catch (JSONException e) {// TODO Auto-generated catch blocke. printStackTrace () ;}} out. write (returnArticles. toString (); out. close ();} catch (IOException e) {// TODO Auto-generated catch blocke. printStackTrace ();} return null ;}





Iii. Summary
1. An onchange or onclick event on the jsp page calls a method in js. This method uses Ajax technology to dynamically call data in the database and asynchronously writes back a JSONArray, the retrieved data is displayed based on the option attribute in the select statement;
2. If you want to return a Map-type array (multiple pieces of data) after calling Ajax, you need to use the JSONArray type, construct each Map into a JSONObject type and add it to the JSONArray to asynchronously write it back to the jsp page;
3. How do you only want to return a Map-type key-Value Pair (for example, get the count (*) number of records) from the action? You can only use the JSONObject object to return one piece of data and display it.