Jquery+jsp the method of obtaining local data by linkage of dropdown frame (with source code) _jquery

This paper illustrates the method of obtaining local data by linkage of jquery+jsp drop-down box. Share to everyone for your reference, specific as follows:

The jquery dropdown frame linkage is a good embodiment of AJAX requirements for data, reduce the amount of data interaction. (Click here to download the source code)

The following example uses JSON to convert a server-side class or object to JSON format, using 6 jar packages primarily

Commons-beanutils-1.7.0.jar
Commons-collections-3.2.jar
Commons-lang-2.3.jar
Commons-logging-1.0.4.jar
Ezmorph-1.0.3.jar
Json-lib-2.1.jar

The following is an experimental diagram and a detailed explanation of the main code

Display Page index.jsp

<%@ page language= "java" import= "java.util.*" pageencoding= "UTF-8"%> <% String Path = Request.getcontextpath ()
;
String basepath = request.getscheme () + "://" +request.getservername () + ":" +request.getserverport () +path+ "/"; %> <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >  

Cosmetic file Chainselect.css

. loading {
 width:400px;
 /*margin-left:auto;*/
 /*margin-right:auto;*/
 margin:0 Auto;
 Visibility:hidden 
}
. Loading p {
 text-align:center;
}
p {
 margin:0;
}
. Car {
 /*width:500px;*/
 /*margin:0 auto;*/
 text-align:center;
}
. carimage {
 text-align:center
}
. Cartype,. Wheeltype,. carloading,. carimg,. Car img {
 display:none;
}

Here, pay attention to attribute display:none; the difference between the Visibility:hidden;

Display:none;

When this property is used, the various property values, such as the width and height of the HTML element (object), are "lost";

Visibility:hidden;

With this property, the HTML Element (object) is visually invisible (fully transparent), and the space it occupies still exists, meaning that it still has attribute values such as height, width, and so on.

jquery Processing File Chainselect.js

$ (document). Ready (function () {//Found three dropdown box var carnameselect = $ (". Carname"). Children ("select");
 var cartypeselect = $ (". Cartype"). Children ("select");
 var wheeltypeselect = $ (". Wheeltype"). Children ("select");
 var carimg = $ (". Carimg");
 Registers the event Carnameselect.change (function () {//1) for the three Drop-down boxes. Need to get the value of the current Drop-down box var Carnamevalue = $ (this). Val ();
 1.1 to the first Drop-down box content changes, the third Drop-down box to hide First wheeltypeselect.parent (). Hide ();
 1.2 Hide the picture of the car Carimg.hide (). attr ("src", ""); 2. If the value is not empty, the value of the Drop-down box is passed to the server if (Carnamevalue!= "") {if (!carnameselect.data (Carnamevalue)) {//corresponding server-side program Carjsonservlet Property and converts the data in that servlet to JSON format $.post ("Carjsonservlet", {keyword:carnamevalue, type: Top},function (data) {/
   2.1 The type of vehicle returned by the receiving server, data in array format if (data.length!= 0) {//2.2 parse the car type of information, fill in the Car type Drop-down box cartypeselect.html ("");
   $ ("<option value= ' > Please choose car type </option>"). Appendto (Cartypeselect); for (var i = 0; i < Data.length i++) {$ ("<option value= '" + data[i] + "' >" + data[i] + "</option>").
   Appendto (Cartypeselect);
   The//2.2.1 car type drop-down box displays the Cartypeselect.parent (). Show ();
   2.2.2 The indicated picture behind the first Drop-down box shows Carnameselect.next (). Show ();
   else {//2.3 does not have any car type data cartypeselect.parent (). Hide ();
   Carnameselect.next (). Hide ();
  } carnameselect.data (Carnamevalue, data);
  }, "JSON");
  } else {//3. If the value is empty, then the second Drop-down box is in span to hide, and the indicator behind the first drop-down box hides the Cartypeselect.parent (). Hide ();
 Carnameselect.next (). Hide ();
 }
 });
 Cartypeselect.change (function () {//1. Need to get the value of the current Drop-down box var Cartypevalue = $ (this). Val ();
 1.1 Hide the picture of the car Carimg.hide (). attr ("src", ""); 2. If the value is not empty, the value of the Drop-down box is passed to the server if (Cartypevalue!= "") {if (!cartypeselect.data (Cartypevalue)) {$.post ("Carjsonservlet", { Keyword:cartypevalue, type: "Sub"},function (data) {//2.1 returned by the receiving server type if (data.length!= 0) {//2.2 parse the vehicle type of data, fill it into the car
   Wheeltypeselect.html ("") in the Drop-down box of the wheel type;
   $ ("<option value= ' > Please select wheel Type </option>"). Appendto (Wheeltypeselect); for (var i = 0; i < data.length; i++) {$ ("<Option value= ' "+ data[i] +" ' > "+ data[i] +" </option> "). Appendto (Wheeltypeselect);
   The//2.2.1 wheel type drop-down box displays the Wheeltypeselect.parent (). Show ();
   2.2.2 The indicated picture behind the second Drop-down box shows Cartypeselect.next (). Show ();
   else {//2.3 does not have any car type data wheeltypeselect.parent (). Hide ();
   Cartypeselect.next (). Hide ();
  } cartypeselect.data (Cartypevalue, data);
  }, "JSON");
  } else {//3. If the value is empty, then the third Drop-down box spans the span to hide, and the second Drop-down box indicates that the picture is hidden wheeltypeselect.parent (). Hide ();
 Cartypeselect.next (). Hide ();
 }
 });
 Wheeltypeselect.change (function () {//1. Get wheel type var Wheeltypevalue = $ (this). Val ();
 2. According to car manufacturer name, car model and wheel type get car picture filename var carnamevalue = Carnameselect.val ();
 var cartypevalue = Cartypeselect.val ();
 var carimgname = Carnamevalue + "_" + Cartypevalue + "_" + Wheeltypevalue + ". jpg";
 3. Display the picture of loading carimg.hide ();
 $ (". Carloading"). Show ();
 4. Pre-loading the image with the image object in javascript var cacheimg = new Image (); $ (cacheimg). attr ("src", "images/" + carimgname). Load (function () {//Hide LoAding picture $ (". Carloading"). Hide ();
 Display car picture carimg.attr ("src", "images/" + Carimgname). Show ();
 });
 3. Modify the Auto picture node src value, let the car picture display//carimg.attr ("src", "images/" + Carimgname). Show ();
 4. Make the car picture nodes show up});
 Define AJAX events for the nodes in the data load, implementing the animation hint effect $ (". Loading"). Ajaxstart (function () {$ (this). CSS ("Visibility", "visible");
 $ (this). Animate ({opacity:1},0);
 }). Ajaxstop (function () {$ (this). Animate ({opacity:0},500);
});

 })

Problem??? : $ ("<option value= ' > Please choose car type </option>"). Appendto (cartypeselect); How to solve the Chinese garbled???

Server-Side Carjsonservlet

Import java.io.IOException;
Import Java.io.PrintWriter;
Import javax.servlet.ServletException;
Import Javax.servlet.http.HttpServlet;
Import Javax.servlet.http.HttpServletRequest;
Import Javax.servlet.http.HttpServletResponse;
Import Net.sf.json.JSONArray; public class Carjsonservlet extends HttpServlet {public void doget (HttpServletRequest request, HttpServletResponse Respo
 NSE) throws Servletexception, IOException {this.dopost (request, response);
 public void DoPost (HttpServletRequest request, httpservletresponse response) throws Servletexception, IOException {
 Solve Chinese garbled response.setheader ("Cache-control", "No-cache");
 Response.setcontenttype ("Text/json;charset=utf-8");
 Request.setcharacterencoding ("UTF-8");
 Gets the value of Type,keyword String type = Request.getparameter ("type");
 String keyword = request.getparameter ("keyword");
 Jsonarray Jsonarrayresult = new Jsonarray ();
  if ("Top". Equals (Type)) {if ("BMW". Equals (keyword)) {jsonarrayresult.add ("316ti"); JsonarrayresUlt.add ("6ercupe");
  else if ("Audi". Equals (keyword)) {jsonarrayresult.add ("tt");
  else if ("VW". Equals (keyword)) {jsonarrayresult.add ("Golf4");
  Or else if ("Sub". Equals (Type)) {if ("tt". Equals (keyword)) {jsonarrayresult.add ("RHA");
  Jsonarrayresult.add ("RHB");
  Jsonarrayresult.add ("RHC");
  else if ("316ti". Equals (keyword)) {jsonarrayresult.add ("RHA");
  Jsonarrayresult.add ("RHB");
  else if ("6ercupe". Equals (keyword)) {jsonarrayresult.add ("RHA");
  Jsonarrayresult.add ("RHB");
  Jsonarrayresult.add ("RHC");
  else if ("Golf4". Equals (keyword)) {jsonarrayresult.add ("RHA");
  Jsonarrayresult.add ("RHB");
 } PrintWriter out = Response.getwriter ();
 Out.write (Jsonarrayresult.tostring ());
 Out.flush ();
 Out.close ();

 }
}

Configuration file Web.xml

<?xml version= "1.0" encoding= "UTF-8"?> <web-app version=
"3.0" xmlns= "http://java.sun.com/xml/ns/" 
 Java ee " 
 xmlns:xsi=" http://www.w3.org/2001/XMLSchema-instance " 
 xsi:schemalocation=" http://java.sun.com/ Xml/ns/javaee 
 http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd ">
 <display-name></ display-name>
 <servlet> 
 <servlet-name>CarJsonServlet</servlet-name> 
 < servlet-class>carjsonservlet</servlet-class> 
 </servlet> 
 <servlet-mapping> 
 <servlet-name>CarJsonServlet</servlet-name> 
 <url-pattern>/carjsonservlet</ url-pattern> 
 </servlet-mapping> 
 <welcome-file-list>
 <welcome-file> index.jsp</welcome-file>
 </welcome-file-list>
</web-app>

jquery and other development knowledge learned in this section:

The alt attribute of the 1.IMG label is written, and the text message of this property is displayed when the picture is not loaded or the picture does not exist.
2.select means the dropdown box, each item in the dropdown box is a option,option the beginning of the end of the label will appear on the page, the Value property is used in jquery method to get the server. When a property value of selected is defined as selected, the current option is selected
3.div elements are centered: Set the width of the Div, and then the values for Margin-left and margin-right are auto. The shorthand method is margin:0 auto;
The P tag of 4.html represents the contents of a paragraph, which is exclusive of one or more lines, followed by another line of content
5. In order for the text and picture in p to be centered, you can use the Text-align property, which has a value of center. The P tag defaults to margin-top and Margin-bottom values and can be erased by CSS if needed.
When the property value of 6.visibility is hidden, the element is hidden, but unlike display for none, it still occupies a certain space in the page, but does not show
7. Multiple selectors if they have the same property values, they can be defined together, separated by commas between selectors
The 8.change method corresponds to the onchange event in standard JavaScript, which can handle the events of the dropdown box content changes
The 9.parent method can obtain the parent node of a node
The 10.next method can obtain the next sibling node of a node, and the corresponding previous method can obtain the last sibling node of a node
The 11.$.post method can initiate a post asynchronous request with the server side. The first parameter is the server-side address of the request, the second parameter is sent to the server-side data, the parameter is a JavaScript object, is represented by a name-value pair, the third parameter is a callback method, and the fourth parameter indicates the data type returned by the server-side. jquery will be able to help us with this parameter conversion. The Get method has only the second argument, and several other parameters are the same
The Simple object definition in 12.Javascript is {key1:value1, key2:value2}
The 13.JSON data format is actually an object or data-defined text format content in JavaScript, such as {key1:value1, key2: [1,2,3]} or [1,2,{key2:
value2}]
14. A direct $ ("<option></option>") method can be used to create the options in the Drop-down box, and then add to the Drop-down box with a method such as Appendto
The 15.attr method can set or get the property value of a node
16.ajaxStart executes before every AJAX request from jquery is started, Ajaxstop executes after all AJAX requests in the jquery queue are completed, Ajaxcomplete executes after each jquery-issued Ajax request ends
17.fadeOut and Fadein can fade in and out, and the parameter content is similar to the Slideup,slidedown method.
18.animate method can achieve any animation effect, you can control a CSS property at a certain time to change, so as to achieve the effect of animation
19.opacity can change the transparency of the elements, ie use filter implementation, 100 for full display, 0 for full transparency, non IE browser using opacity properties, 1 for full display, 0 for transparency. jquery masks The browser differences in the Animate method, and uses opacity directly to achieve the fading effect.
The 20.data method can be used to cache data. Caching can improve system efficiency and reduce server-side load
21. You can use the image object in JavaScript to preload the picture so that you know when the picture is loaded so that you can give some hints about the picture loading.
The 22.load method can correspond to the OnLoad event in JavaScript, which is used to capture the event that the picture is loaded and completed

I hope this article will help you with the jquery program design.