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