Cascading operations (ajax) in the drop-down menu and ajax operations in the drop-down menu

Cascading operations (ajax) in the drop-down menu and ajax operations in the drop-down menu

In development, you often encounter cascade operations on menus, such as the selection of countries, cities, and towns. When a country is selected, the following menu lists the cities in the country. When the country is selected, the corresponding towns are listed in the subsequent menu.

There are two ways to solve the cascade operation of such menus:

① Implemented using js, and put the cascading data used by the page into js. After the page is loaded, it is displayed in the corresponding select through js, there are many solutions for this method. The most intuitive one is to put it in a multi-dimensional array, and each person's thinking is different. I will not explain it in detail here.

② Ajax is used for asynchronous dynamic loading and then displayed in the corresponding select. This method is very convenient and is recommended for development.

The following is a small example in development:

JSP brief page:

<Div class = "form-group"> <label class = "col-sm-2 control-label"> device Category </label> <div class = "col-sm-4"> <select class =" basic-single "name =" codeCategory "onchange =" showCodeSubCate () "id =" codeCategory "style =" width: 100% "> </select> </div> <label class =" col-sm-2 control-label "> device subclass </label> <div class =" col-sm-4 "> <select class = "basic-single" name = "codeSubCategory" id = "codeSubCate" disabled = "disabled" style = "width: 100% "> <option value =" "> -- select -- </option> </select> </div>
</Div>

This page contains two select types: Device category and device subclass. The device category is a level-1 menu, and the device subclass is a level-2 menu. The display content of the device subclass is determined by the device category.

The following shows the ajax code snippet:

Function addCodeCategory () {$. ajax ({url: "<% = request. getContextPath () %>/facilitydict/showCodeCategory ", async: false, // whether the request is asynchronous. The default value is asynchronous. This is also an important ajax feature type:" GET ", // Request Method success: function (result) {result = $. parseJSON (result); var data = result. data; var codeCates = data. split (","); str = '<option value = "6801"> -- select -- </option>'; for (x in codeCates) {str + = '<option value = "' + codeCates [x] + '">' + codeCates [x] + '</option> ';} $ ("# codeCategory" cmd.html (str) ;}}) ;}function showCodeSubCate () {$ ("# codeSubCate "). prop ("disabled", ""); // unlock the select parameter of the device subclass var target =$ ("# codeCategory option: selected "). text (); $. ajax ({url: "<% = request. getContextPath () %>/facilitydict/showCodeSubCategory ", data: {codeCategory: target}, async: false, // whether the request is asynchronous, asynchronous by default, which is also an important ajax feature type: "GET", // Request Method success: function (result) {result = $. parseJSON (result); var data = result. data; var codeCates = data. split (","); var str = ""; for (x in codeCates) {str + = '<option value = "' + codeCates [x] + '">' + codeCates [x] + '</option> ';} $ ("# codeSubCate" cmd.html (str );}});}

It is not hard to see that when the content in the device category selector changes, the showCodeSubCate function is triggered to request the background to obtain data, and then the requested data is added to the select corresponding to the device subclass. The implementation of the background code is as follows (only the controller method is attached ):

@RequestMapping("/showCodeCategory")  @ResponseBody  public Result<String> searchCodeCategory() {    Result<String> rs = new Result<>();    List<String> codeCategorys = facilityDictService.searchCodeCategory();    String codeCate = StringUtil.collectionToCommaDelimitedString(codeCategorys);    rs.setData(codeCate);    return rs;  }  @RequestMapping("/showCodeSubCategory")  @ResponseBody  public Result<String> searchCodeSubCategory(HttpServletRequest request) {    String codeCategory = request.getParameter("codeCategory");    Result<String> rs = new Result<>();    List<String> codeSubCategorys = facilityDictService.searchCodeSubCategory(codeCategory);    String codeCate = StringUtil.collectionToCommaDelimitedString(codeSubCategorys);    rs.setData(codeCate);    return rs;  }

The two methods correspond to the preceding two ajax requests respectively. It is worth introducing the data returned by the background. The return value type is Result <String>, and the return value type is a tool class, specific implementation can be viewed in my blog, link: http://www.cnblogs.com/blog411032/p/5799669.html

Tools for interactive data transmission between ajax and the background

 public class Result<T> implements Serializable {  private static final long serialVersionUID = 3637122497350396679L;  private boolean success;  private T data;  private String msg;  public Result() {  }  public Result(boolean success) {    this.success = success;  }  public boolean isSuccess() {    return success;  }  public void setSuccess(boolean success) {    this.success = success;  }  public T getData() {    return data;  }  public void setData(T data) {    this.data = data;  }  public String getMsg() {    return msg;  }  public void setMsg(String msg) {    this.msg = msg;  }  public Result(boolean success, String msg) {    super();    this.success = success;    this.msg = msg;  }  public Result(boolean success, T data) {    super();    this.success = success;    this.data = data;  }} 

This class provides great convenience for frontend and backend Interaction:

The following is the ajax interaction between the front and back ends:

Front-end ajax code:

$. Ajax ({url: "<% = request. getContextPath () %>/supp/deleteSupp ", data: {supplierId: supplierId}, async: false, // whether the request is asynchronous. The default value is asynchronous. This is an important ajax feature type: "GET", // Request Method success: function (data) {var rs = eval ('+ data +'); flag = rs. success; if (flag) {alert ("deleted successfully! ");}}});

The following is the background java code:

  @RequestMapping("/deleteSupp")  @ResponseBody  public Result<String> deleteSupplier(HttpServletRequest request){    Result<String> rs = new Result<>();    String supplierId = request.getParameter("supplierId");    supplierService.deleteSupplierById(supplierId);    rs.setSuccess(true);    return rs;  }

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.