用jquery的ajax向前台提交数据

最新推荐文章于 2019-06-14 16:34:18 发布

Tidhy

最新推荐文章于 2019-06-14 16:34:18 发布

阅读量669

点赞数

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/Tidhy/article/details/72796674

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种利用Ajax技术从前端请求后台数据，并通过JSON格式返回数据的方法。具体实现步骤包括：在后台将查询结果转换为JSON字符串，设置响应头以避免中文乱码，最后将数据发送到前端；前端则通过Ajax接收数据并生成下拉列表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在进行数据库操作的时候基本都会进行前后台的交互，那么就会用到ajax技术，在action层，需要将返回来的集合或是数组转换成json，方便前台取出，下面是代码

	@Override
	public String execute() throws Exception {
		//1 调用Service根据typecode获得数据字典对象list
		List<BaseDict> list = baseDictService.getListByTypeCode(dict_type_code);
		//2 将list转换为 json格式
		String json = JSONArray.fromObject(list).toString();
		//3 将json发送给浏览器，这个是处理中文乱码问题的
		ServletActionContext.getResponse().setContentType("application/json;charset=utf-8");
		//将service层返回来的数据，传到页面
		ServletActionContext.getResponse().getWriter().write(json);
		return null;//告诉struts2不需要进行结果处理
	}

下面的是前台做下拉列表的js代码：

//使用ajax加载数据字典,生成select
//参数1: 数据字典类型 (dict_type_code)
//参数2: 将下啦选放入的标签id
//参数3: 生成下拉选时,select标签的name属性值
//参数4: 需要回显时,选中哪个option
function loadSelect(typecode,positionId,selectname,selectedId){
	//1 创建select对象,将name属性指定
	var $select =  $("<select name="+selectname+" ></select>");
	//2 添加提示选项
	$select.append($("<option value='' >---请选择---</option>"));
	//3 使用jquery 的ajax 方法,访问后台Action
	$.post("${pageContext.request.contextPath}/BaseDictAction", { dict_type_code:typecode},
	  function(data){
	   		//遍历
	//4 返回json数组对象,对其遍历
	   		$.each( data, function(i, json){
		// 每次遍历创建一个option对象
	   			var $option = $("<option value='"+json['dict_id']+"' >"+json["dict_item_name"]+"</option>"); 
	   			
			if(json['dict_id'] == selectedId){
			//判断是否需要回显 ,如果需要使其被选中
				$option.attr("selected","selected");
			}
		//并添加到select对象
				$select.append($option);
	   		});
	  },"json");
		
	//5 将组装好的select对象放入页面指定位置
	$("#"+positionId).append($select);
}