首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

基于jquery的异步交付例子

2012-09-14 
基于jquery的异步提交例子后台代码一、 ?/**? * 得到大类的数据? * @param request? * @param response? */

基于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;" 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;" 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>

热点排行