流程:
1.点击加载btn发起异步请求post
2.后台处理请求返回数据
3.前端获取数据成功,对数据进行处理
前端:
html:首先要导入jq包,不然怎么用ajax呢。
<script type="text/javascript" src="js/jquery.js"></script>
<select name="warId" id="warId" style="height:100%;width:107px">
<option value="">所有仓库 </option>
</select>
<script type="text/javascript">
$(document).ready(function(){ //这里实现的是: 点击class为add的按钮时加载仓库列表
$(".add").click(function(){
$.post("xxxx.do",function(data){ //要异步加载的action,和成功后的回调
var objs = data.warehouses; //对应action里的属性
var selObj = $("#wareId");
selObj.empty();
for (var i in objs) {
var obj = objs[i];
addOption(selObj,obj.id,obj.warehouseName); //为Select追加一个Option(下拉项)
}
},"json"); //返回类型
});
});
function addOption(selObj,value,text){
var optionstring = "<option value=\"" + value + "\" >"+ text + "</option>";
selObj.append(optionstring); //为Select追加一个Option(下拉项)
}
</script>
后台structs:
使用注解实现,
要注意的是声明类的时候要加注解:@ParentPackage("json-default")
方法声明注解: @Action(value = "xxxx", results = @Result(name = "success", type="json"))
需要跳转页面就把type = "json" 换成 location = "/mobile/auction_detailed.jsp" 要跳转的页面
@ParentPackage("json-default")
public class WarHouseAction extends ActionSupport {
@Autowired
private WarehouseService warehouseService;
private List<Warehouse> warehouses;
/**
* 后台ajax
* @return
* 需要跳转页面就把type = "json" 换成 location = "/mobile/auction_detailed.jsp" 要跳转的页面
*/
@Action(value = "addGood_before", results = @Result(name = "success", type="json"))
public String addGoodBefore(){
warehouses = warehouseService.findAllEnableWarehouses(); //这个是返回到页面的
return "success";
}
public WarehouseService getWarehouseService() {
return warehouseService;
}
public void setWarehouseService(WarehouseService warehouseService) {
this.warehouseService = warehouseService;
}
public List<Warehouse> getWarehouses() {
return warehouses;
}
public void setWarehouses(List<Warehouse> warehouses) {
this.warehouses = warehouses;
}
}
提示一下用的是jquery.js v1.4.1的 ,用min的貌似是返回json的不是返回obj