How does jquery implement the ajax interaction box (1)

Front-end page Copy codeThe Code is as follows: <script type = "text/javascript" src = "$ {rc. contextPath}/js/jquery. select. js"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# RwflSelect"). linkSelect ({
Nodata: "none ",
Required: true,
FirstUrl: '$ {rc. contextPath}/repair/loadCategory ',
SecondUrl: '$ {rc. contextPath}/repair/loadSubCategory ',
FirstValue: '$! {Repair. categoryid} ', // task category
SecondValue: '$! {Repair. subcategoryid} '// character class
});
});
</Script>
<Tr id = "rwflSelect">
<Td width = "100" class = "t_r prten field_c"> task category: </td>
<Td width = "131"> <select class = "first" name = 'categoryid'> </select> </td>
<Td width = "10"> </td>
<Td width = "131"> <select class = "second" name = "subcategoryid" disabled = "disabled"> </select> </td>
</Tr>

Appendix
Jquery. select. jsCopy codeThe Code is as follows :/*
Ajax three-level linkage
Date:
Settings parameter description
-----
FirstUrl: the URL for retrieving first-level drop-down data, which is returned by josn.
FirstValue: the first-level drop-down value by default.
SecondUrl: URL obtained from the second-level drop-down data, which is returned by josn
SecondValue: Default second-level drop-down value
ThirdUrl: Three-Level drop-down data acquisition URL, josn returns
ThirdValue: third-level drop-down value by default
Nodata: No data status
Required: required
------------------------------*/
(Function ($ ){
$. Fn. linkSelect = function (settings ){
If ($ (this). size () <1) {return ;};
// Default Value
Settings = $. extend ({
FirstUrl: "js/city. min. js ",
FirstValue: null,
SecondValue: null,
ThirdValue: null,
Nodata: null,
Required: true
}, Settings );
Var box_obj = this;
Var first_obj = box_obj.find (". first ");
Var second_obj = box_obj.find (". second ");
Var third_obj = box_obj.find (". third ");
Var select_prehtml = (settings. required )? "": "<Option value =''> select </option> ";
Var prepareSelectHtml = function (jsonArray ){
Var temp_html = select_prehtml;
$. Each (jsonArray, function (index, row ){
Temp_html + = "<option value = '" + row. value + "'>" + row. text + "</option> ";
});
Return temp_html;
};
// Assign a value to the second-level drop-down box function
Var secondStart = function (){
Second_obj.empty (). attr ("disabled", true );
Third_obj.empty (). attr ("disabled", true );
If (first_obj.val () = ''){
Return;
}
$. GetJSON (settings. secondUrl, {firstValue: first_obj.val (), time: new Date (). getTime ()}, function (jsonResult ){
If (! JsonResult. success ){
If (settings. nodata = "none "){
Second_obj.css ("display", "none ");
Third_obj.css ("display", "none ");
} Else if (settings. nodata = "hidden "){
Second_obj.css ("visibility", "hidden ");
Third_obj.css ("visibility", "hidden ");
};
Return;
}
// Traverse the second-level drop-down list of value assignment
Second_obj.html (prepareSelectHtml (jsonResult. data). attr ("disabled", false).css ({"display": "", "visibility ":""});
ThirdStart ();
});

};
// Three-level drop-down box function
Var thirdStart = function (){
Third_obj.empty (). attr ("disabled", true );
$. GetJSON (settings. thirdUrl, {firstValue: first_obj.val (), secondValue: second_obj.val (), time: new Date (). getTime ()}, function (jsonResult ){
If (! JsonResult. success ){
If (settings. nodata = "none "){
Third_obj.css ("display", "none ");
} Else if (settings. nodata = "hidden "){
Third_obj.css ("visibility", "hidden ");
};
Return;
}
// Traverse the three-level drop-down list
Third_obj.html (prepareSelectHtml (jsonResult. data). attr ("disabled", false).css ({"display": "", "visibility ":""});
ThirdStart ();
});
};
Var init = function (){
// Traverse the value assignment level-1 drop-down list
$. GetJSON (settings. firstUrl, {time: new Date (). getTime ()}, function (jsonResult ){
If (! JsonResult. success ){
Return;
}
// Traverse the value assignment level-1 drop-down list
First_obj.html (prepareSelectHtml (jsonResult. data ));
SecondStart ();
// If values of level 1 and level 2 are input, select. (SetTimeout is set to be compatible with IE6)
SetTimeout (function (){
If (settings. firstValue & settings. firstValue. length> 0 ){
First_obj.val (settings. firstValue );
SecondStart ();
SetTimeout (function (){
If (settings. secondValue & settings. secondValue. length> 0 ){
Second_obj.val (settings. secondValue );
ThirdStart ();
SetTimeout (function (){
If (settings. thirdValue & settings. thirdValue. length> 0 ){
Third_obj.val (settings. thirdValue );
};
}, 1 );
};
}, 1 );
};
}, 1 );
});
// An event occurs when a level 1 is selected.
First_obj.bind ("change", function (){
SecondStart ();
});
// Event occurred when selecting Level 2
Second_obj.bind ("change", function (){
ThirdStart ();
});
};
// Initialize the first drop-down box
Init ();
};
}) (JQuery );

$ {Rc. contextPath}/repair/loadCategory's background method and returned json value:Copy codeThe Code is as follows: @ RequestMapping ("loadCategory ")
@ ResponseBody
Public Map <String, Object> loadCategory (ModelMap model ){
String msg = "";
Boolean isSuccess = false;
List <Map <String, String> maps = new ArrayList <Map <String, String> ();
Try {
List <Category> categories = categoryService. findAllCategory ();
For (Category category: categories ){
Map <String, String> map = new HashMap <String, String> ();
Map. put ("value", category. getId (). toString ());
Map. put ("text", category. getCategoryName ());
Maps. add (map );
}
Msg = "the search category is successful. ";
IsSuccess = true;
} Catch (Exception e ){
Msg = "failed to search for category. ";
Log. error ("failed to search for major categories:" + e. getMessage (), e );
}
Return buildAjaxResult (isSuccess, msg, maps );
}
Protected Map <String, Object> buildAjaxResult (boolean isSuccess, String msg, Object data ){
Map <String, Object> resultMap = new HashMap <String, Object> ();
ResultMap. put ("success", isSuccess );
ResultMap. put ("msg", msg );
ResultMap. put ("data", data );
Return resultMap;
}

Effect