第一步:导入相应的包
第二步:写个Action类,这个Action类返回的就是你要查询数据库的信息。
第三步:配置action,与普通action一样的配置,但在返回页面的时候必须是新页面,而且这个页面必须是写JSON的表达式,只有这些表达式,不可重用。
第四步:写JS代码,发送JSON。
具体例子:
第一:action类:
/**
*jquery的JSON技术获取数据
* 通过部门编号获取教师
*@authod陈海文
* */
public class Teacher extends ActionSupport{
private static final long serialVersionUID = 8569590764453392595L;
private int id;
private List<com.heaven.Enpty.Teachers> list;
private TeacherCourseServiceimpl terchercourseserviceimpl;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public TeacherCourseServiceimpl getTerchercourseserviceimpl() {
return terchercourseserviceimpl;
}
public void setTerchercourseserviceimpl(
TeacherCourseServiceimpl terchercourseserviceimpl) {
this.terchercourseserviceimpl = terchercourseserviceimpl;
}
public List<com.heaven.Enpty.Teachers> getList() {
return list;
}
public void setList(List<com.heaven.Enpty.Teachers> list) {
this.list = list;
}
public String execute() throws Exception {
list=this.terchercourseserviceimpl.findTeacherByTdept(id);
return SUCCESS;
}
}
第二步:
配置Action
<action name="te" class="com.heaven.action.Teacher">
<result name="success">/jsp/MyJsp.jsp</result>
</action>
(可以直接访问Action来调试,比如这个action配置的访问:http://。。。。。。/te.action)
第三步:
写JSP
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags" %>
([{name:'---请选择老师---'}
<s:iterator var="t" value="list">
,{name:'${t.tname}'}
</s:iterator>]
)
就是传说中的JSON表达式:这里的意思是【】表示数组,里面有很多个{},每个{}就是JSON表达式。其中{键:'值'},这样的话在JS里面就可以直接找键就取出值来。其中list是action类得返回数据的对象引用,也就是SetList()方法的List名字,其实就是字段名。注意要赋值才有效,我这里是查询数据库得List类型的list=this.terchercourseserviceimpl.findTeacherByTdept(id);最外层大口号是因为JS里面要返回JSON格式数据变为对象,没口号将得不到对象,而是未定义的字段
第四步:写JS
$(function() {
//触发select改变状态的事件
$("#depart").change(function() {
//初始一个HTTP请求,返回JSON数据
$.get("te.action",
{id:$(this).val()},//JSON的表达式参数,id对应着Action里的那个参数Id
function(data){ //回调函数返回
var tcr = eval(data);//把JSON格式的数据变为一个对象
var $trop = $("#tc");
$trop.empty(); //清空
$.each(tcr,function(index){
$trop.append("<option>"+this.name+"</option>");
})
}
)
})
});
http://www.bejson.com/ JSON校验器
支持原创
分享到:
相关推荐
结合dwr与ajax简单的完整例子, 有时间看看
Ajax+js+csse实现的无刷新注册页面。页面以排版好。
aja kona3驱动
AJA KONA 3G 4K LHI LHe Plus 苹果mac 系统驱动 HDMI KONA® IP KONA® LHi KONA® 1 KONA® 3G KONA® LHe Plus ...AJA Control Room™ AJA DataCalc AJA eMini-Setup Mini-Config Software AJA...
前端项目-aja,异步javascript和javascript/json(P):不带XML的Ajax
ASP + AJAX留言板 学习AJAX好代码
aja缓存问题
基于AJA的技术详细资料,包括详细的接口及所支持的接口协议。
Windows版本的AJA,磁盘测试的好帮手。
Wordpress是一个流行的开源博客平台,拥有丰富的插件和主题,可以方便地扩展和定制网站功能和外观。 ...用户可以发布自己的问题和需求,其他用户可以回答和提供帮助。同时,管理员可以管理用户和内容,维护网站的正常...
AJA_Kona3_NDD_8.1.2--aja kona3驱动
AJA_KiPro_Rack_Manual硬盘录像机说明书
ajax的PPT和ajax的4四个实例,让你轻松掌握ajax的使用,适合ajax的入门级应用。手把手教你使用ajax,带你进入ajax的大门
这个属于ajax分页代码,可以自由控制,css 为演示中所有样式的css样式文件和图片文件 ... 使用方法: 引入分页核心文件 引用你要的分页样式或从我原有的样式中分离出你要的样式 $pageSize=20; //此参数为每页数量 ...
可以自动校验,输入表单后可以自动逐一进行校验,不用传送到服务器
最好的mac检测移动硬盘和U盘读写速度的工具。
详细的ajax 开发技术大全 有最全的Ajax知识 对于你轻松掌握一门技术有很大帮助
Java Aja基础.ppt
JQuery AJax 详解 教程 想要了解JQuery Ajax的朋友可以关注一下
Aja入门基础教程.pdf