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實現邏輯，承上啓下。