zoukankan      html  css  js  c++  java
  • structs2注解+jsp+ajax实现post异步载入select

    流程:

    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%;107px">
    	<option value="">全部仓库 </option>
    </select>

    <script type="text/javascript">
    $(document).ready(function(){    //这里实现的是: 点击class为add的button时载入仓库列表
    	$(".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

  • 相关阅读:
    微信网页授权获取用户数据-简单开发样例
    为阿里云域名配置免费SSL支持https加密访问简单教程
    LNMP1.3 一键配置环境,简单方便
    python doc另存为docx
    一款移动端网页的代码调试器,鹅厂出品
    移动端禁止页面缩放的meta标签在这里,别再乱找了~
    分享一款极好的响应式404单页
    Tippy.js – 轻量的Javascript Tooltip工具库,最好体验的tip提示工具
    微信内打开网页提示请在浏览器打开页面效果代码
    CSS3 文字忽大忽小效果样式收藏
  • 原文地址:https://www.cnblogs.com/zfyouxi/p/4374670.html
Copyright © 2011-2022 走看看