jquery+json+ajax 二级联动

毁灭号 2011-04-28

展开全文

createElement(name) 方法可创建元素节点。此方法可返回一个 Element 对象。
参数name 字符串值，这个字符串可为此元素节点规定名称。如果 name 参数中含有不合法的字符，该方法将
抛出代码为 INVALID_CHARACTER_ERR 的 DOMException 异常。
appendChild(newchild) 方法可向节点的子节点列表的末尾添加新的子节点。
Internet Explorer 会忽略节点间生成的空白文本节点（例如，换行符号），而 Mozilla 不会这样做。
例子:
// 生成一下拉框
var new_select = document.createElement('SELECT');
new_select.onchange = function() { itemtree_cats_change(this); };
// 生成选取项
1) 用createElement方法
var opt = document.createElement('OPTION');
new_select.appendChild(opt);
2) 用 new 的方法
new_select.options[new_select.options.length] = new Option('', '');
在iE7下, 第一种方法可以成功,没什么意外,在ie6和firefox下,不行,没有option出现在select中
在ie7,ie6,firefox下, 第二种方法都能正常显示.
input.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www./TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jeecms-main</title>
<script type="text/javascript" src="../banner/js/jquery-1.2.6.js"></script>
<script type="text/javascript">
$(getsort);
function getsort(){
var pid=$("#bpid").val();
var time=new Date();
$.ajax({
cache:false,
url:'ajax_findSort.action',
type:'post',
dataType:'json',
data:{pid:pid,t:time},
success:update_c
});
}
function update_c(json){
var sort=json.sort;
var cbanner=json.cbanner;
var s_root=document.getElementById('bannerid');
s_root.options.length=0;
for(var i in sort){
var option = document.createElement("option");
var value=sort[i].id;
var text=sort[i].name;
option.text=text;
option.value=value;
s_root.options[s_root.options.length] =option;
}
}
</script>
</head>
<body>
当前位置添加文章
<@s.form action="article_addArticle.action">
文章栏目:<select id="bpid" name="bpid" onchange="getsort()" >
<#list Request.pbanner as p>
<option value="${p.id}">${p.name}</option>
</#list>
</select>
栏目分类:<select id="bannerid" name="bannerid"/>
</body>
</html>
AjaxAction.java

在getXxx（）方法前使用@JSON(name="XXX") 注解可以重命名json传输的名,

官方的说法是：如果有些属性不希望被json 串行化，可以在属性前加 transient 修饰符，或者不要加get 方法，都可以达到此目的。

但在我的测试中，带了transient 修饰符但还是被串行化了，这个不知道是不是bug 。。

package action;
import java.util.HashSet;
import java.util.Iterator;
import java.util.List;
import java.util.Set;
import action.bean.SortBean;
import entity.Banner;
import service.BannerService;
public class AjaxAction {
private BannerService bannerService;
private transient int pid;
private Set sort;
public String findSort(){
Banner banner=bannerService.findBanner(pid);
sort=new HashSet();
if(banner!=null){
if(banner.getBanners()!=null&&banner.getBanners().size()!=0){
Set s=banner.getBanners();
Iterator it=s.iterator();
while(it.hasNext()){
Banner c=(Banner)it.next();
SortBean sb=new SortBean();
sb.setId(c.getId());
sb.setName(c.getName());
sort.add(sb);
}
}
}
return "success";
}
public void setBannerService(BannerService bannerService) {
this.bannerService = bannerService;
}
public Set getSort() {
return sort;
}
public void setSort(Set sort) {
this.sort = sort;
}
public int getPid() {
return pid;
}
public void setPid(int pid) {
this.pid = pid;
}
}
struts.xml

<package name="aticle_ajax" extends="json-default" >
<action name="ajax_*" class="ajaxAction" method="{1}">
<result type="json"></result>
</action>
</package>官方json-plugin 网站：http://cwiki./S2PLUGINS/json-plugin.html