AJAX 简单使用前后台代码

最新推荐文章于 2024-05-12 22:45:54 发布

原创最新推荐文章于 2024-05-12 22:45:54 发布 · 416 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

开发记录专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个使用AJAX从前端向后端发送请求并处理返回JSON数据的具体实例。前端通过POST方式调用后端接口，根据不同的场景参数填充对应的HTML元素。后端根据传入的参数获取数据列表，并将每条数据转换为JSON对象，最终以JSON数组形式返回。

AJAX 使用

前台：

function getData(id){
	  			$.ajax({
				type:'POST',
				url:"../parklots/byScr.do",
				data:{
				scr:scr
				},
				success:function(msg){
	
					$("#JKDiv_0").empty();
					$("#JKDiv_1").empty();
					$("#JKDiv_2").empty();
					for(var i=0;i<msg.length;i++){
					
var bs="<input type='radio' name='equipName'  value='"+msg[i].id+"'/>"+msg[i].equipName+"</br>";
var cs="<input type='hidden' id='"+msg[i].id+"'  value='"+msg[i].equipName+"'/></br>";
						if(scr==1){
							$("#JKDiv_0").append(bs);
							$("#JKDiv_0").append(cs);
						}else if(scr==2){
							$("#JKDiv_1").append(bs);
							$("#JKDiv_1").append(cs);
						}else if(scr==3){
							$("#JKDiv_2").append(bs);
							$("#JKDiv_2").append(cs);
						}
					}
				}
			}); ```
后台：

public void byScr(Integer scr, HttpServletRequest request,
		HttpServletResponse response, ModelMap model) {
	List<BeanInducedScreen> scrlist = scrMng.getByScrLevel(scr);
	JSONArray jsonArray = new JSONArray();
	for (BeanInducedScreen b : scrlist) {
		JSONObject jsonObject = new JSONObject();
		jsonObject.put("id", b.getId());
		jsonObject.put("scrLevel", b.getSrcLevel());
		jsonObject.put("equipName", b.getEquipName());
		jsonArray.put(jsonObject);

	}
	ResponseUtils.renderJson(response, jsonArray.toString());

}