html+spring boot简单的ajax数据传输实现
生活随笔
收集整理的這篇文章主要介紹了
html+spring boot简单的ajax数据传输实现
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
本篇講解在前后端不分離情況下的html+spring boot的項(xiàng)目數(shù)據(jù)傳輸實(shí)現(xiàn)
首先，后臺(tái)我寫了三個(gè)接口
package com.demo.ajax.controller;import com.demo.ajax.Entity.Person;
import lombok.extern.slf4j.Slf4j;
import org.jboss.logging.Param;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;import java.util.LinkedList;
import java.util.List;@Slf4j
@RestController
@RequestMapping("/hello")
public class HelloController {//這個(gè)接口保證數(shù)據(jù)傳輸?shù)倪M(jìn)行@RequestMapping("/hello")public @ResponseBody String hello(){log.info("調(diào)用到了");return "調(diào)用到了";}/*這個(gè)接口保證我的前臺(tái)能夠獲取到后臺(tái)查詢到的數(shù)據(jù)*/@RequestMapping("/hello2")public @ResponseBody List hello2(){Person person =new Person("林丹","男",33);Person person2 =new Person("李宗偉","男",33);Person person3 =new Person("馬林","男",22);List<Person> list = new LinkedList<>();list.add(person);list.add(person2);list.add(person3);return list;}/*這個(gè)接口保證我后臺(tái)能夠接受到前臺(tái)傳過來的數(shù)據(jù)*/@RequestMapping("/hello3")public @ResponseBody Person hello3(@Param String name,String gender,int age){Person person=new Person(name,gender,age);log.info(person.toString());return person;}
}
這里我創(chuàng)建了一個(gè)實(shí)體類，以供上面的對(duì)象創(chuàng)建
package com.demo.ajax.Entity;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;@Data
@AllArgsConstructor
@NoArgsConstructor
public class Person{private String name;private String gender;private int age;}接著就是前端的書寫
我將頁面放在了resource目錄下的static下
這里注意：使用ajax首先需要引入jQuery插件
接著就是頁面了
<!DOCTYPE html>
<html lang="en">
<script src="js/jquery-1.4.4.min.js"></script>
<head><meta charset="UTF-8"><title>測(cè)試</title>
</head>
<body><input type="button" value="button" onclick="whenClick1/2/3();"><table id="tab"></table>
</body>
</html>
<script>function whenClick1(){// 在這里，根據(jù)后臺(tái)是否有返回值、是否有參數(shù)，來變換，首先是第一個(gè)$.ajax( {url:'hello/hello', //請(qǐng)求地址async: false, //異步開關(guān)type:'post', //請(qǐng)求方式data: {},datatype : "json",//"xml", "html", "script", "json", "jsonp", "text".success : function(data) {alert("data);},error : function() {alert("異常！！！");}});}function whenClick2(){$.ajax( {url:'hello/hello2', //請(qǐng)求地址async: false, //異步開關(guān)type:'post', //請(qǐng)求方式data: {},datatype : "json",//"xml", "html", "script", "json", "jsonp", "text".success : function(data) {$.each(data, function (n, item) {//這里調(diào)用了下面最后一個(gè)方法，以在頁面展示我從后臺(tái)獲取到的內(nèi)容addPerson(n,item);});},error : function() {alert("異常！！！");}});}function whenClick3(){$.ajax( {url:'hello/hello3', //請(qǐng)求地址async: false, //異步開關(guān)type:'post', //請(qǐng)求方式data: {name:'劉某',gender:'男',age:23},datatype : "json",//"xml", "html", "script", "json", "jsonp", "text".success : function(data) {alert("名字是："+data.name);},error : function() {alert("異常！！！");}});}function addPerson(n,item) {var val = "<tr>" +"<td>"+(n+1)+"</td>" +"<td>"+item.name+"</td>" +"<td>"+item.gender+"</td>" +"<td>"+item.age+"</td>" +"</tr>";$("#tab").append(val);}</script>
最后總結(jié)一小下：@ResponseBody是能夠讓后臺(tái)返回的數(shù)據(jù)自動(dòng)轉(zhuǎn)換為json格式的，所以前臺(tái)ajax這里的data用json格式接受，如果是動(dòng)態(tài)數(shù)組或者鏈表，則用
$.each(data, function (n, item) {});
來將它循環(huán)遍歷開。
有問題可以聯(lián)系我，以上！
總結(jié)
以上是生活随笔為你收集整理的html+spring boot简单的ajax数据传输实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring Boot整合Spring
- 下一篇： js校验复选框（多选按钮）是否被选中的方