SSM用jq整合Ajax入門案例講解
SSM用Jq整合Ajax
我就是一個程序小白，很多原理都不懂，下面的內容只能讓新手知道怎麽用。
Ajax
廢話少說，總之像點贊，評論，之類的很多功能沒必要進行頁面跳轉，SSM框架用表單或者超鏈接的方式提交給Controller層都必須頁面跳轉，用Ajax其實和表單提交之類的沒區別，只是不用跳轉。
比如你想實現一個簡單點贊增加功能，同時數據庫保存信息
jsp代碼
<span id="sp1">用戶1</span><br/>
<button id="bt1">點贊</button><span id="sp2">0</span>
也就是點一下贊，贊的數量+1，數據庫裏用戶1的點贊數量也+1
Jq代碼
在<head>標簽裏引入jq，如果你的SSM裏面有jq就按照引用js那樣，如果沒有，你就用我下面的代碼
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> //這樣引入jq電腦需要聯網
下面是jq代碼（不懂不要緊，就是這樣用，復制粘貼罷了）
<script type="text/javascript">
$(function () {
var user=$("#sp1").text();//獲取點贊對象：用戶1
var sum=$("#sp2").text()//獲取當前贊的數量，這裏獲取的是字符串
$("#bt1").click(function () {//給button設置點擊事件
$.ajax({
url: "addZan", //這個對應Controller的URL，和你們以前表單裏面的action一樣
data: { //data就是你想要傳什麽數據到Controller層，這裏的數據是json數據。
usera:user//多個數據用逗號隔開，usera其實相當於form裏的name屬性，這個名字和Controller層傳過去的值對應
//user就是剛剛獲取到的值，相當於把user賦值給usera
//其實這行代碼可以寫成 usera:$("#sp1").text()
},
type: "POST", //類型，POST或者GET,就和表單與超鏈接一樣
dataType: ‘text‘, //Controller層返回類型，如果返回String，就用text,返回json,就用json
success: function (data) { //成功，回調函數
alter(data.result);//可以用data調用Controller返回的值
$("#sp2").html(parseInt(sum)+1;);//點贊+1，先把sum強轉為整再+1
},
error: function () { //失敗，回調函數
alter("程序出錯。。。");
}
});
})
})
</script>
Controller層
@RequestMapping("/addZan")//對應jq裏面的url
@ResponseBody//需要傳值就用這個註解
public String addZan(@RequestParam("usera") String usera) {//usera就是jq傳進來的參數
//操作數據庫，調用Sevice層，和SSM一模一樣
String result="點贊成功";
retrun result;
}
SSM用jq整合Ajax入門案例講解