為什么寫這個(gè)呢。因?yàn)樵诂F(xiàn)在的網(wǎng)頁(yè)中。單純的同步傳遞數(shù)據(jù)已經(jīng)變得非常少了。大多數(shù)都是通過(guò)Ajax異步來(lái)傳遞數(shù)據(jù)的。因此在這里用SpringMVC+Ajax做一個(gè)簡(jiǎn)單的小例子，同時(shí)輔助以拼接字符串顯示。希望能為大家?guī)?lái)幫助。
本次案例的配置仍然是在上一篇SpringMVC的簡(jiǎn)單增刪改查（SSM整合）的基礎(chǔ)上再輔助配置Jackson的jar包。
服務(wù)器端
@RequestMapping("/ajaxlist")
@ResponseBody//(springmvc的Jackson注解，返回json字符串)
public ListUser> getUserList()
{
ListUser> list =userService.findAll();
return list;
}
前端使用
body>
button id="testButton">異步傳輸/button>
div id="content">/div>
/body>
Ajax請(qǐng)求并拼接字符串
script type="text/javascript">
$(function() {
$("#testButton").click(function()
{
$.ajax(
{
url:"${pageContext.request.contextPath }/user/ajaxlist",
type:'GET',
dataType:'json',
success:function(data)
{
//拼接字符串
var html = "table>tr>td>用戶名/td>td>密碼/td>td>昵稱/td>td>電子郵箱/td>/tr>";
for(var i=0;idata.length;i++)
{
html=html+"tr>"+"td>"+data[i].username+"/td>"+"td>"+data[i].password+"/td>"+
"td>"+data[i].nickname+"/td>"+"td>"+data[i].email+"/td>"+"/tr>";
}
html = html+"/table>";
$("#content").append(html);
}
});
});
});
/script>
其實(shí)在寫的過(guò)程中，我在用firebug調(diào)試的時(shí)候，發(fā)現(xiàn)jQuery的文件無(wú)法獲取到， 我一直以為是路徑問(wèn)題，確定路徑無(wú)誤后我發(fā)現(xiàn)，是我靜態(tài)資源映射沒(méi)配置。配置靜態(tài)資源映射后就OK了。
前端顯示結(jié)果
當(dāng)然這里顯示得并不是太漂亮，如果需要美觀一點(diǎn)?？梢砸隑ootstrap或者其他框架來(lái)美化樣式。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:- spring mvc+localResizeIMG實(shí)現(xiàn)HTML5端圖片壓縮上傳
- 詳解如何配置springboot跳轉(zhuǎn)html頁(yè)面
- Spring Boot引入swagger-ui 后swagger-ui.html無(wú)法訪問(wèn)404的問(wèn)題
- spring boot 2.x html中引用css和js失效問(wèn)題及解決方法
- springboot如何使用thymeleaf模板訪問(wèn)html頁(yè)面
- Springboot訪問(wèn)html頁(yè)面的教程詳解
- 詳解SpringBoot+Thymeleaf 基于HTML5的現(xiàn)代模板引擎
- spring boot請(qǐng)求異常處理并返回對(duì)應(yīng)的html頁(yè)面
- Springmvc返回html頁(yè)面問(wèn)題如何解決
