注意:如果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
相关推荐
完整的jq ajax提交表单,奖解压后jq文档加入页面中,调用就可惟了。 表单结构 <form id="myForm" action="comment.php" method="post"> Name: <input type="text" name="name" /> Comment: <...
脚本简介jQ AJAX文件上传是一款基于jquery实现的PHP迷你AJAX文件上传表单。
jQ AJAX文件上传表单 jQuery AJAX文件上传表单代码下载.zip
基于Jq的ajax无刷新,图片上传,这里只写了,前端如何获取图片信息,然后利用ajax上传,后台的话,原来怎么操作文件就怎么操作,不需要做特殊处理
Asp.Net WebApi 上传文件方法: 实现功能: 1.原生js调用api上传 2.jq ajax调用api上传 上传文件
用户注册,简单的模仿用户注册效果,判定用户名是否存在,还有一些基本的判定
JQ+ajax实现异步调用 一个简单的小例子
myeclipse开发的, 弘扬开源精神,杜绝积分下载 刚出炉的例子
Servlet+jqAjax+json jar包 异步传输实例
工作之余写的一些Ajax应用,有6个Demo,数据库为mysql,使用之前看readme.txt。javascript与jquery混用。无刷新购物车、输入提示、表格局部刷新、xml实时数据更新、划词解释。
目前大多门户网站加载发表微博等信息时,都应用了滚动加载页面,使其给客户更加友好话,且减少了数据库压力。是不错的技术想法。
JQuery+ajax实现批量上传图片 JQuery+ajax实现批量上传图片 JQuery+ajax实现批量上传图片
AJAX-Cache是一款jQuery缓存插件,可以为$.ajax()方法扩展缓存功能
ajax的同步异步请求,分别用 jquery和 javascript的方式另外和 jsonp 的请求方式
jq_ajax的练习 可进行参考练习ajax
设备缺陷管理 三层架构 DIV+CSS+AJAX+JQuery
一个完整的jquery+ajax传送请求的实例
JQuery ajax的各种使用方法示例和说明 本示例程序由VS2010建立 c# asp.net ajax demo
Jquery ajax 读取txt文件 Jquery分页 Jquery ajax 读取txt文件 Jquery分页
// 2 使用$.ajax发送fd // 需要指定两个属性 // - processData : false // - contentType : false $.ajax({ method : 'POST', url : '/ajax_Day5/datas03.php', data : fd, success : function (data) { ...