Added to the previous three-level linkage--using jquery to write various browser-compatible easy Items _ compatible

1. Project Overview

Development techniques for Project use: Hibernate+struts+ajax+jquery+mysql

With the previous three-level linkage is different: The previous project is the use of DOM technology to write the entire JS code, there are some deficiencies and bugs, that is, browser is not compatible, only in the effectiveness of Firefox , IE, opera, Google, etc. are not compatible ... Which module is causing the incompatibility, I am currently testing, welcome people with lofty ideals a piece of testing, on my spur; This project improved the previous project, using lightweight jquery technology to write JS core code, there is no browser compatibility problem (I test: IE, opera, Firefox, Google), and the code is simpler and more logical; The core code was written using the three AJAX interfaces provided in jquery to implement asynchronous communication using AJAX technology, in particular, with detailed annotations;

Reprint please specify the Source: Yang Exclusive Channel

The complete project (defaults to 1 points, forgot to change the resource score, originally wanted to 0 points uploaded, sorry): Tianyazaiheruan

2. Project Source

$ (document). Ready (function () {//Jqery's first case//Invoke Ajax request, JS's native format, write directly {} object $.ajax ({async:true,// Asynchronous send request type: "Get",//using the way to send the request, the default is get, and the Post method URL: "./csdn/provinceaction_select.action?time=" + New D Ate (). GetTime (),//Set the URL address of the request DataType: "JSON",//server pre-returned data format, modified attributes are: HTML, text, XML, script and other value types Success:functio
					N (data, textstatus) {//callback function successfully returned//get all the province var jsonpros = data.provinces;
						Traversal province for (var i = 0; i < jsonpros.length i++) {//Get specific province var jsonpro = jsonpros[i];
						Create an option for jquery object var $proOpt = $ ("<option></option>");
						Sets the property $proOpt. attr ("value", jsonpro.pid) for the option object;
						$proOpt. Text (jsonpro.pname);
					Add the Option province node you created to the Select node in the province $ ("#province"). Append ($PROOPT);

			}, Error:function (XHR, Textstatus, Errorthrown) {//failure returned callback function}});
		Jqery's second case//when the province has changed the event of departure $ ("#province"). Bind ("Change",			function () {//Empty data $ ("#city") [0]=1;
						
						$ ("#country") [0]=1; Further encapsulation//transfer of AJAX data var pid = $ ("#province"). Val (); $.get ("./csdn/cityaction_select.action?time=" + new Date (). GetTime (),//URL requested Luj {Pid:p
							ID},//request passed parameter function (data) {//Returns the callback function when successful//get all the city var jsoncities = data.cities;
								for (var i = 0; i < jsoncities.length i++) {//Get specific city var jsoncity = jsoncities[i];
								Create an option for jquery object var $cityOpt = $ ("<option></option>");
								Sets the property $cityOpt. attr ("value", jsoncity.cid) for the option object;
								$cityOpt. Text (jsoncity.cname);
							Adds the option node province node created to the Select node of the city $ ("#city"). Append ($CITYOPT); }}, "JSON");

			The returned data type});

						The third case of Jqery $ ("#city"). Change (function () {//Empty data $ ("#country") [0]=1;
						var cid = $ ("#city"). Val ();
					Post method to send an AJAX request	$.post ("./csdn/countryaction_select.action?time=" + new Date (). GetTime (), {cid:cid}, function (DA
							TA) {//Get all the city var jsoncountries = data.countries;
								for (var i = 0; i < jsoncountries.length i++) {//Get specific town var jsoncountry = jsoncountries[i];
								Create an option for jquery object var $countryOpt = $ ("<option></option>");
								Sets the property $countryOpt. attr ("value", Jsoncountry.tid) for the option object;
								$countryOpt. Text (jsoncountry.tname);
							Adds the option node province node created to the Select node in the town $ ("#country"). Append ($COUNTRYOPT);
					}}, "JSON");

		});

}); Struts.xml <?xml version= "1.0" encoding= UTF-8 "?>" <! DOCTYPE struts Public "-//apache Software foundation//dtd struts Configuration 2.3//en" "http://struts.apache.org/dtds/ Struts-2.3.dtd "> <struts> <include file=" Www/csdn/project/resource/struts-constant.xml "/> < Package Name= "CSDN" namespace=/csdn "extends=" JSON-default "> <action name=" provinceaction_* "class=" www.csdn.project.action.ProvinceAction "method=" {1} "> <result type= "JSON" > <!--changing configuration parameters is critical, if you do not set the change parameter JSON object will load the city class by default, causing the session to be closed error--> <param name= "includ Eproperties ">provinces\[\d+\]\.pid,provinces\[\d+\]\.pname</param> </result> <result name=" Input ">/index.jsp</result> </action> <action name=" cityaction_* "class=" Www.csdn.project.action.CityAction "method=" {1} "> <result type=" JSON "> <param name=" Includepropertie S ">cities\[\d+\]\.cid,cities\[\d+\]\.cname</param> </result> <result name=" Input ">/index.jsp </result> </action> <action name= "countryaction_*" class= "www.csdn.project.action.CountryAction" Me Thod= ' {1} ' > <result type= ' json ' > <param name= ' includeproperties ' >countries\[\d+\]\.tid,countries\[\ d+\]\.tname</param> </result> <result NamE= "Input" >/index.jsp</result> </action> </package> </struts>