天蓝

记录个人成长吧!

Jquery、ajax、Spring、以及后台处理(-)

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")
@ResponseBody
public 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实现逻辑,承上启下。

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yuanmxiang/article/details/51018536
个人分类: Ajax 项目小结
想对作者说点什么? 我来说一句

SpringMVC利用Ajax,JQuery交互Json

2017年08月22日 10.03MB 下载

springmvc利用jquery实现ajax的例子

2013年12月24日 5.25MB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭