基于jquery的异步提交例子

后台代码一、

 /**
  * 得到大类的数据
  * @param request
  * @param response
  */
 private void getParentGory(HttpServletRequest request,
   HttpServletResponse response) {
  System.out.println("the process is comming!!");
  response.setCharacterEncoding("utf-8");
  response.setHeader("Cache-Control", "no-store");
  response.setHeader("Pragma", "no-cache");
  response.setDateHeader("Expires", 0);
  PrintWriter out = null;
  String str = "";
  try {
   out = response.getWriter();
   String sql = "select * from t_artType where parentid=0 order by typeId desc";
   ResultSet rs = BaseDaoSuport.getInstence().getList(sql, null);
   List<ArtType> list = new ArrayList<ArtType>();
   while (rs.next()) {
    artype = new ArtType();
    artype.setDataByRs(rs, artype);
    list.add(artype);
   }
   Iterator<ArtType> iter = list.iterator();
   while (iter.hasNext()) {
    ArtType artype = iter.next();
    str += artype.getTypeId() + "," + artype.getTypeName() + "|";
   }
  } catch (Exception e) {
   e.printStackTrace();
  }
  out.print(str);
  out.close();
 }

 

后台代码二、

/**
  * 得到小类的数据
  *
  * @param request
  * @param response
  */
 private void getChildGory(HttpServletRequest request,
   HttpServletResponse response) {
  System.out.println("the process is comming!!");
  response.setCharacterEncoding("utf-8");
  response.setHeader("Cache-Control", "no-store");
  response.setHeader("Pragma", "no-cache");
  response.setDateHeader("Expires", 0);
  PrintWriter out = null;
  String str = "";
  try {
   out = response.getWriter();
   int parentId = Integer.parseInt(request.getParameter("parentId"));
   String sql = "select * from t_artType where parentid=" + parentId
     + " order by typeId desc";
   ResultSet rs = BaseDaoSuport.getInstence().getList(sql, null);
   List<ArtType> list = new ArrayList<ArtType>();
   while (rs.next()) {
    artype = new ArtType();
    artype.setDataByRs(rs, artype);
    list.add(artype);
   }
   Iterator<ArtType> iter = list.iterator();
   while (iter.hasNext()) {
    ArtType artype = iter.next();
    str += artype.getTypeId() + "," + artype.getTypeName() + "|";
   }
  } catch (Exception e) {
   e.printStackTrace();
  }
  out.print(str);
  out.close();
 }

前台js异步提交代码

得到大类的数据:

function getBigcategory() {
 //alert(typecode);
 $.get("ArtTypeServlet?status=getParentGory", null, getParentGory_callback);
}

function getParentGory_callback(data) {
 var big = data.split("|");
 var bigcategory = document.getElementById("bigCategory");
 //alert(smallselect);
 bigcategory.length = big.length - 1;
 for ( var i = 0; i < bigcategory.length; i++) {
  var ss = big[i].split(",");
  bigcategory.options[i].text = "---"+ss[1]+"---";
  bigcategory.options[i].value = ss[0];
 }
}

function getSmallcategory(parentId) {
 //alert(typecode);
 $.get("ArtTypeServlet?status=getChildGory", {
  parentId : parentId
 }, getChildGory_callback);
}

function getChildGory_callback(data) {
 var small = data.split("|");
 var smallcategory = document.getElementById("smallCategory");
 //alert(smallselect);
 smallcategory.length = small.length - 1;
 for ( var i = 0; i < smallcategory.length; i++) {
  var ss = small[i].split(",");
  smallcategory.options[i].text = "---"+ss[1]+"---";
  smallcategory.options[i].value = ss[0];
 }
}

 

页面代码

<td style="height: 28px; width: 200px;" class="style1">文章所属板块</td>
                   <td style="height: 28px;" class="style6" align="left" >
                      &nbsp;<select id="bigCategory" onclick="getSmallcategory(this.value)" name="bigCategory" style="width: 150px; height:30px;font-size:20px;border:1px teal solid">
                          <option  value="请选择" selected="selected">--请选择--</option>
                       </select>
          </td>
          <td style="height: 28px; width: 146px;" class="style1">板块类型</td>
                   <td style="height: 28px;" class="style6" align="left">
                      &nbsp;<select id="smallCategory" name="artTypeId" style="width: 150px; height:30px;font-size:20px;border:1px teal solid">
                          <option value="请选择" selected="selected">--请选择--</option>
                       </select>
          </td>