jq ajax

最新推荐文章于 2024-11-08 11:17:16 发布

c692088846

最新推荐文章于 2024-11-08 11:17:16 发布

阅读量104

点赞数

分类专栏： js 文章标签： json java 测试

本文链接：https://blog.csdn.net/c692088846/article/details/84516539

版权

js 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

注意：如果ajax请求时参数中有中文，哪么get会出现乱码，使用post可解决

1：绑定事件调用ajax

$(document).ready(function() {
			$('#example').dataTable();
			$('#channelBandwidth').click( function() {
				$.ajax({
                                         ContentType:'application/x-www-form-urlencoded',					　　type:'get',//可选get
					　　url:'${projectPath}/test',
					　　data:'data=3',//传给PHP的数据，多个参数用&连接
					　　dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script htmltext等
					　　success:function(msg){
					　　alert(msg);
					　　},
					　　error:function(){
					　　alert('error');
					　　}
			})})
		});

2：后台使用spring mvc传值

@RequestMapping("/test")
public String gettset(HttpServletRequest request,  
        HttpServletResponse response) throws Exception {  
	response.setContentType("text/plain" + ";charset=UTF-8");
	response.setHeader("Pragma", "No-cache");
	response.setHeader("Cache-Control", "no-cache");
	response.setDateHeader("Expires", 0);
	response.getWriter().write("aaa");
	response.getWriter().flush();
    return null;  
}

如果要传多个数据可用json

data:{"channelType":$('#channelType').val(),"channel":$('#channel').val(),"day":$('#day').val(),"startTime":$('#startTime').val(),"endTime":$('#endTime').val(),"database":$('#database').val()},

使用其它格式返回（@ResponseBody 直接返回body）

	@RequestMapping("/update")
	public @ResponseBody
	Map<String, String> updateBandwidth(@ModelAttribute SearchBean searchBean) {
		Map<String, String> map = new HashMap<String, String>();
		try {
			bandwidthService.upBandwidth(searchBean);
			String jo = bandwidthService.getBandwidth(searchBean);
			map.put("status", "ok");
			map.put("msg", jo);
		} catch (UpdateDataBasesException e) {
			logger.error(e.getMessage());
			map.put("status", "no");
			map.put("msg", "更新数据失败，请到操作记录页重新操作");
		}
		return map;
	}

前台页面ajax使 dataType:‘json’

3:spring mvc 前台ajax传值给后台，前台传值为数组，数组中为对象

前台

function submit_alarmmessage(){
	var alarmmessage_list=new Array(); 
	if($('#sms').attr("checked")=="checked"){
		var tempObj=new Object();
		tempObj.id=$('#sms_id').val();
		tempObj.cc='';
		tempObj.received=$('#smsaddress').val();
		tempObj.enable='1';
		tempObj.message_type='SMS';
		alarmmessage_list.push(tempObj);
	}	
    if($('#email').attr("checked")=="checked"){
		var tempObj=new Object();
		tempObj.id=$('#email_id').val();
		tempObj.received=$('#emailaddress').val();
		tempObj.cc=$('#emailcc').val();
		tempObj.enable='1';
		tempObj.message_type='EMAIL';
		alarmmessage_list.push(tempObj);
	}    
	$.ajax({   
      　　type:'post',//可选get   
      　　url:'${projectPath}/alarmsystemalarmmesupdate',
      　　data:$.toJSON(alarmmessage_list),
      contentType: "application/json; charset=utf-8",
      　　dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script htmltext等   
      　　success:function(msg){   
    	      },   
      　　error:function(XMLHttpRequest, textStatus, errorThrown){  
              }
})
}

数组格式

[{"id":"6","cc":"","received":"1881","enable":"1","message_type":"SMS"},{"id":"3","received":"dongling.zhang@q.com","cc":"1111@126.com","enable":"1","message_type":"EMAIL"}]

后台接收

@RequestMapping("/alarmsystemalarmmesupdate")
	public @ResponseBody
	String updateAlarmMessage(@RequestBody List<Map> alarmmessage_list) {
	    return null;	
	}

参考：

http://bbs.csdn.net/topics/390123483

http://what-is-javascript.iteye.com/blog/1735691

http://ljhzzyx.blog.163.com/blog/static/383803122013115114544562/

http://blog.csdn.net/c5906343/article/details/26482975