Jquery、ajax、Spring、以及后台处理(-)
来源:互联网 发布:软件开发技术员招聘 编辑:程序博客网 时间:2024/05/29 08:06
1.Jquery里直接使用ajax
前台代码:
$.ajax({ url : "/login", //ajax请求的url data : {"name":"Jhon","password":"12345"}, //传入后台的数据,key-value形式,其实是json串 type : 'post', //请求类型,有post和get dataType : 'json', async : false, //是否异步处理 success : function(result) { //如果处理成功,返回值会出现在result里,其是个json对象 console.log(result); //可以在此处对得到的结果进行显示等一些处理 }, error : function(msg) { //处理失败,打印错误信息 }
后台处理:基于spring框架
@RequestMapping("/login")@ResponseBody public String manageLogin(HttpRequest request,HttpResponse response){ //返回值为String String name=resquest.getParameter("name"); //获取前台name值"Jhon" String password=request.getParameter("password");//获取前台passowrd值"12345" JSONObject getObj = new JSONObject(); getObj.put("success","successed"); return getObj.toString();}
此时前台result对象为{”sucesss”:”successed”},使用result[“successs”]可取值。而如果后台想要返回什么数据其实只需把数据转换为字符串,加上一个key。然后传给前台就ok了。
2.在jquery的datatable处理函数里面使用ajax,即引入datatable表格,在定义表格属性时定义其页面处理函数,在回调函数里面使用ajax,而此时的result得到的json对象,通过把json对象传给回调函数fnCallback(),此函数自动绑定其key为”aaData”的value值到当前datatable,注意此时table的列数要与aaData的value域的列数一模一样,才能实现自动绑定。
result对象格式为:
{
“aaData”:{“data1”“data2”,“data3”“data4”,“data5”“data6”},
“iTotalRecords”:3,
……其他属性
}这就是一个json对象。
后台返回的结果就是一串JSON串,前台此时接收到的应该是个json对象,在console.log(result)打印出来应该是Object.
例子如下:springmvc + jquery datatable + ajax实现动态分页查询
前台代码:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css"><title>listView</title> <table id="tb" class="display"> <thead> <tr> <th>col1</th> <th>col2</th> </tr> </thead> <tbody> </tbody> </table> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.dataTables.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#tb").dataTable({ "bProcessing": false, // 是否显示取数据时的那个等待提示 "bServerSide": true,//这个用来指明是通过服务端来取数据 "sAjaxSource": "tableDemoAjax.html",//这个是请求的地址 "fnServerData": retrieveData // 获取数据的处理函数 }); }); // 3个参数的名字可以随便命名,但必须是3个参数,少一个都不行 function retrieveData( sSource111,aoData111, fnCallback111) { $.ajax({ url : sSource111,//这个就是请求地址对应sAjaxSource data : {"aoData":JSON.stringify(aoData111)},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数 type : 'post', dataType : 'json', async : false, success : function(result) { fnCallback111(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的 }, error : function(msg) { } }); } </script>
后台处理的代码为:
@RequestMapping("tableDemoAjax")@ResponseBodypublic String tableDemoAjax(@RequestParam String aoData) { JSONArray jsonarray = JSONArray.fromObject(aoData); String sEcho = null; int iDisplayStart = 0; // 起始索引 int iDisplayLength = 0; // 每页显示的行数 for (int i = 0; i < jsonarray.size(); i++) { JSONObject obj = (JSONObject) jsonarray.get(i); if (obj.get("name").equals("sEcho")) sEcho = obj.get("value").toString(); if (obj.get("name").equals("iDisplayStart")) iDisplayStart = obj.getInt("value"); if (obj.get("name").equals("iDisplayLength")) iDisplayLength = obj.getInt("value"); } // 生成20条测试数据 List<string[]> lst = new ArrayList<string[]>(); for (int i = 0; i < 20; i++) { String[] d = { "co1_data" + i, "col2_data" + i }; lst.add(d); } JSONObject getObj = new JSONObject(); getObj.put("sEcho", sEcho);// 不知道这个值有什么用,有知道的请告知一下 getObj.put("iTotalRecords", lst.size());//实际的行数 getObj.put("iTotalDisplayRecords", lst.size());//显示的行数,这个要和上面写的一样 getObj.put("aaData", lst.subList(iDisplayStart,iDisplayStart + iDisplayLength));//要以JSON格式返回 return getObj.toString();}</string[]></string[]>
3.ModelAndView 的使用
一般涉及到页面跳转的时候用MOdelAndView处理。此时把对象或者其他数据返回的指定页面。用ModelAndView返回ajax数据不可以。
for example:
后台处理:
private User user;Map<String,Object> model=new HashMap<String,Object>();model.put("userobj",user)return new ModelAndView("/manage",model)
前台获取数据:可以使用EL表达式
<c:forEach items="${model}" var="model" > ${model.userobj}</c:forEach>
4.关于json的一些想法
JSON:JavaScript 对象表示法(JavaScript Object Notation)。
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快,更易解析。(w3c)
例如:
{"employees": [{ "firstName":"Bill" , "lastName":"Gates" },{ "firstName":"George" , "lastName":"Bush" },{ "firstName":"Thomas" , "lastName":"Carter" }]}
就是一个json对象。
人们常说json对象和json串。到底这俩者有什么区别,就我个人观点认为json对象是对前台的人员说的,而json串是对后台的人员说的,就以上例子我们可以发现,json串其实就是一个符合json格式的字符串,其到了前台javascript可以通过其函数将其转换为json对象,以便于获取你想得到的数据。或者其某些框架可以自动把json串转为json对象,比如jquery里的ajax的result.
总之:
json串:后台说法,Json格式的字符串
json对象:前台说法,javascript里的json对象
关系:json串通过eval()函数转json对象(不知可记错了。。。)
工具:object 转json推荐使用阿里开发的fastjson.jar
5、关于代码中Dao层与Service层和controller层的关系
原则:Dao层制作数据的增删该差,对于查询,返回值只有
bool,Object,List<Object>//不会查询单一属性的值
其他要做任何处理都要到Service层,包括封装json,提取属性等操作。
而controller层原则上只与service层打交道,就算简单的数据查询,也需要通过service层封装一次,这样的目的是为了代码之间低耦合,便于代码的扩展与维护。即service实现逻辑,承上启下。
- Jquery、ajax、Spring、以及后台处理(-)
- php后台处理程序+ajax(jquery)
- jquery的ajax请求处理以及处理后台java传的json数据
- jquery ajax验证用户名是否存在(后台spring mvc)
- jquery ajax验证用户名是否存在(后台spring mvc)
- jQuery Ajax的Spring后台接收数组
- jquery ajax 向后台传递map以及后台的 接收
- Ajax前台请求 以及 后台 Java 处理 (包含undefined的问题)
- ajax实现文件上传以及后台servlet中的处理总结
- jquery ajax 传数据到后台乱码的处理方法
- jQuery ajax异步处理 后台返回json/jsonArray数据
- ajax后台处理响应(java)
- (Jquery Ajax Call )Post 一个Form去后台以及AJAX call后DIV重新加载
- 关于Ajax ,jQuery以及jQuery Ajax 编程 (一)
- 关于Ajax ,jQuery以及jQuery Ajax 编程 (二)
- 关于Ajax ,jQuery以及jQuery Ajax 编程 (三)
- 关于Ajax ,jQuery以及jQuery Ajax 编程 (四)
- 关于Ajax ,jQuery以及jQuery Ajax 编程 (五)
- nyist 201 作业题(最长上升子序列和最长下降子序列)
- 107页Pacific Trails Resort案例分析
- 《MySQL必知必会学习笔记》:子查询
- Android四大组件之Activity的生命周期详解
- 我们不应歧视任何编程语言,她们都是萌娘!(有图有真相)
- Jquery、ajax、Spring、以及后台处理(-)
- 安装linux镜像文件
- IOS学习之——手势解锁
- Java 快速排序算法
- Long.valueOf()作用
- linux获取当前图形界面的分辨率的小程序
- hdu5616 Jam's math problem
- apns服务
- Python学习笔记(二)——Python CGI编程