第五節 關於SpringMVC中Ajax的配置和應用[下午]

時間  2019-11-20
標籤 第五 關於 springmvc ajax 配置 應用 下午 欄目 Spring 简体版
原文   原文鏈接

 

  

成熟，不是學會表達，而是學會嚥下，
當你一點一點學會剋制住不少東西，才能駕馭好人生。 javascript

還有一週，祥雲19就算結算了，
一個半月的相處但願，胖先生算一個合格的老師 html

小白，小蔡，2婷婷，小猴，小恆，小崔，小龍，小姜，小翔 java

                                                     --胖先生  83604162jquery

 

AJAX即"Asynchronous，Javascript+XML"（異步JavaScript和XML），是指一種建立交互式網頁應用的網頁開發技術。AJAX=異步JavaScript和XML（標準通用標記語言的子集）。AJAX是一種用於建立快速動態網頁的技術。 sql

0.使用二階段的返回數據形式GSON，request,response json

   

1.關於SpringMVC中使用Ajax返回JSON數據的配置 api

A.須要使用相關的JAR包[jackson--jar]瀏覽器

   

2.示例關於註冊驗資 微信

<head> app

<base href="<%=basePath%>">

<meta charset="UTF-8">

<script type="text/javascript" src="resource/jquery.js"></script>

<script type="text/javascript">

function toCheck(){

var account = $.trim($("#account").val());

$.post("reg",{account:account},function(data){

if(data.flag=="success"){

//其餘操做

}else{

alert(data.message);

return false

}

});

}

</script>

</head>

<body>

<h2>用戶驗證</h2>

<input type="text" name="account" id="account" onchange="toCheck()">

</body>

@RequestMapping("/reg")

@ResponseBody

//該註解會根據不一樣的類型，進行轉換，最終把對象和集合等都轉換成JSON對象

public Map<String,Object> test(String account){

Map<String,Object> map = new HashMap<>();

if("admin".equals(account)){

map.put("flag", "error");

map.put("message", "該帳號已經被註冊");

}else{

map.put("flag", "success");

}

return map;

}

   

模擬狀況一: 頁面輸出對象的詳細信息

<script type="text/javascript" src="resource/jquery.js"></script>

<script type="text/javascript">

$(function(){

$.post("load",function(data){

// 使用alert測試一下數據是否完整

// alert(JSON.stringify(data));

$("ul").append("<li>"+data.user_id+"</li>");

$("ul").append("<li>"+data.user_name+"</li>");

$("ul").append("<li>"+data.account+"</li>");

$("ul").append("<li>"+data.password+"</li>"); $("ul").append("<li>"+data.photo+"</li>");

});

})

</script>

<body>

<h2>顯示對象信息</h2>

<ul></ul>

</body>

@RequestMapping("/load")

@ResponseBody

public User load() {

User user = new User();

user.setUser_id(1000);

user.setAccount("wukong");

user.setUser_name("悟空");

user.setPassword("123456");

user.setPhoto("a.jpg");

return user;

}

<script type="text/javascript" src="resource/jquery.js"></script>

<script type="text/javascript">

$(function(){

$.post("load",function(data){

// 使用Jquery提供的工具，查看幫助文檔

$.each(data,function(key,value){

$("ul").append("<li>"+value+"</li>");

});

   

});

})

</script>

<body>

<h2>顯示對象信息</h2>

<ul></ul>

</body>

@RequestMapping("/load")

@ResponseBody

public User load() {

User user = new User();

user.setUser_id(2000);

user.setAccount("bajie");

user.setUser_name("八戒");

user.setPassword("123456");

user.setPhoto("a.jpg");

return user;

}

<script type="text/javascript" src="resource/jquery.js"></script>

<script type="text/javascript">

$(function(){

$.post("load",function(data){

 

//javascript當中的for循環

for(var key in data){

$("ul").append("<li>"+data[key]+"</li>");

}

   

});

})

</script>

</head>

<body>

<h2>顯示對象信息</h2>

<ul></ul>

</body>

@RequestMapping("/load")

@ResponseBody

public User load() {

User user = new User();

user.setUser_id(1000);

user.setAccount("wukong");

user.setUser_name("悟空");

user.setPassword("123456");

user.setPhoto("a.jpg");

return user;

}

模擬狀況二:加載更多 [分頁]

<script type="text/javascript" src="resource/jquery.js"></script>

<script type="text/javascript">

$(function(){

initData();

})

function initData(){

$.post("list",function(data){

if(data!=null&&data.length>0){

for(var i=0;i<data.length;i++){

$("tbody").append("<tr><td>"+data[i].user_name+"</td></tr>");

}

}

 

});

}

 

 

</script>

</head>

<body>

<h2>顯示一個用戶的詳細</h2>

<table border="1">

<tbody></tbody>

</table>

<input type="button" value="加載更多" onclick="initData()">

</body>

數據來源:

@RequestMapping("/list")

@ResponseBody

public List<User> list(){

List<User> userList = new ArrayList<User>();

User user = new User();

user.setUser_id(1000);

user.setAccount("wukong");

user.setPassword("123456");

user.setUser_name("悟空");

user.setPhoto("a.jpg");

userList.add(user);

user = new User();

user.setUser_id(2000);

user.setAccount("bajie");

user.setPassword("123456");

user.setUser_name("八戒");

user.setPhoto("a.jpg");

userList.add(user);

return userList;

}

   

實戰應用:統計圖Chart

http://www.highcharts.com/ 開源而且在手機端的支持比較，學習成本比較低

http://echarts.baidu.com/ 百度出也是開源

http://www.fusioncharts.com/ 老牌子的公司，比較好看，部分免費試用

http://www.anychart.com/

   

練習示例三:使用插件完成統計圖操做

  

  

  

  

  

  

   

參考在線示例 : http://www.fusioncharts.com/dev/getting-started/building-your-first-chart.html

關於屬性介紹 : http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-properties.html

   

模擬環境爲:查詢角色擁有的人數有哪些?

   

-- 查詢每一個角色下擁有多少人,分組查詢

SELECT

r.role_name label,

count(u.user_id) value

FROM

sys_role r

LEFT JOIN sys_user u ON r.role_id = u.fk_role_id

GROUP BY

r.role_id

由於圖像化界面咱們使用的數據格式爲:

 

[

{"label": "Alex","value": "25000"},

{"label": "Mark","value": "35000"},

{"label": "David","value": "42300"},

{"label": "Graham","value": "35300"},

{"label": "John","value": "31300"}

];

   

它所須要的KEY的名稱爲label和value，所以我使用了投機取巧的辦法
讓查詢以後的結構數據爲label和value

   

首先咱們須要經過控制層跳轉到Controller層

@RequestMapping("/sys/shxt")

public String toChart(){

return "jsp/chart";

}

JSP代碼以下:在這裏惟一須要注意的就是路徑問題，必定要看清楚，不這是<mate>標籤
 

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<script type="text/javascript" src="<%=path %>/resource/jquery.js"></script>

<script type="text/javascript" src="<%=path %>/resource/fusioncharts/fusioncharts.js"></script><!--引入主類庫-->

<script type="text/javascript">

$(function(){

initData(); //調用方法進行數據初始化操做

});

function initData(){

$.post("<%=path %>/sys/chart",function(data){

//設置要顯示什麼樣子的統計圖，標題等等，須要查看以前的地址中有API的屬性

var json = {

chart:{

yaxisname:"Y軸的名稱",

caption:"顯示的主標題",

numbersuffix:"人",//設置前綴

useroundedges:"1",

bgcolor:"FFFFFF,FFFFFF",

showborder:"0"

}

};

json.data = data;//給JSON增長屬性data

var data = JSON.stringify(json);//須要JSON形式的字符串

   

   

var chart = new FusionCharts("Column2D.swf", "ChartId", "650", "300", "0", "0");

//建立一個FusionCharts對象，第一個參數爲swf文件的路徑，第二個爲id用來標識這個對象，第三個爲寬度，第四個爲高度

chart.setJSONData(data);

chart.render("shxt");//將FusionCharts對象填充到指定的div標籤處：render（div）

});

}

</script>

</head>

<body>

<div id="shxt">在這加載圖形</div><!--定義一個div用於存放圖形-->

   

</body>

   

</html>

   

//控制層代碼，須要返回JSON數據，那麼久須要jackson的三個jar包
@RequestMapping("/sys/chart")

@ResponseBody

public List<Map<String,Object>> chartRole(){

IUserService userService = new UserServiceImpl();

return userService.charRole();

}

//調用接口實現類

@Override

public List<Map<String, Object>> charRole() {

SqlSession sqlSession=null;

try {

sqlSession = MyBatisUtils.getSqlSession();

return sqlSession.getMapper(UserMapper.class).charRole();

} finally {

MyBatisUtils.closeSqlSession(sqlSession);

}

   

}

<!-- 接口實現類，惟一須要注意的方爲resultType -->
<select id="charRole" resultType="map">

SELECT

r.role_name label,

count(u.user_id) value

FROM

sys_role r

LEFT JOIN sys_user u ON r.role_id = u.fk_role_id

GROUP BY

r.role_id

</select>

   

   

胖先生的微信

感受該文章對你有所幫助，請點擊

推薦↓↓↓↓↓↓↓↓↓↓
您的支持是我最大的動力，
該資料推薦給四海興唐的各位同窗，
但願大家工做順利，無論什麼時候何地，
能幫助大家是胖先生的榮幸!
 

 

 

 

謝謝，小白的支持！
謝謝，小白的支持！

 

   

補充知識點:

A.關於JSON形式的字符串轉換爲JSON對象的方式

//說明:變量data爲json的字符串
//1.若是使用JavaScript原生的方式轉換JSON形式字符串轉成JSON對象

var shxt = eval("("+data+")");//這種方法必定要記住，以防方一

alert(shxt.flag+"---"+shxt["flag"])

//-------------分割線-------------------//

//2.若是你的瀏覽器版本在IE9以上

var a = JSON.parse(data);

alert(a.message+"-----"+a["flag"]);

//-------------分割線-------------------//

//使用jquery幫咱們自動完成轉換

$.post("check",{account:account},function(data){

 

},"json");

  

   

B.關於把對象轉換爲JSON形式的字符串的方法

//說明:變量data爲對象
$.post("check",{account:account},function(data){

//給data對象新增屬性

data.shxt="四海興唐";

data["xy36"]="祥雲36";

//將對象轉換成JSON形式的字符串

alert(JSON.stringify(data));

 

},"json");
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程