html+spring boot简单的ajax数据传输实现
生活随笔
收集整理的這篇文章主要介紹了
html+spring boot简单的ajax数据传输实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本篇講解在前后端不分離情況下的html+spring boot的項目數據傳輸實現
首先，后臺我寫了三個接口
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 {//這個接口保證數據傳輸的進行@RequestMapping("/hello")public @ResponseBody String hello(){log.info("調用到了");return "調用到了";}/*這個接口保證我的前臺能夠獲取到后臺查詢到的數據*/@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;}/*這個接口保證我后臺能夠接受到前臺傳過來的數據*/@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;}
}
這里我創建了一個實體類，以供上面的對象創建
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>測試</title>
</head>
<body><input type="button" value="button" onclick="whenClick1/2/3();"><table id="tab"></table>
</body>
</html>
<script>function whenClick1(){// 在這里，根據后臺是否有返回值、是否有參數，來變換，首先是第一個$.ajax( {url:'hello/hello', //請求地址async: false, //異步開關type:'post', //請求方式data: {},datatype : "json",//"xml", "html", "script", "json", "jsonp", "text".success : function(data) {alert("data);},error : function() {alert("異常！！！");}});}function whenClick2(){$.ajax( {url:'hello/hello2', //請求地址async: false, //異步開關type:'post', //請求方式data: {},datatype : "json",//"xml", "html", "script", "json", "jsonp", "text".success : function(data) {$.each(data, function (n, item) {//這里調用了下面最后一個方法，以在頁面展示我從后臺獲取到的內容addPerson(n,item);});},error : function() {alert("異常！！！");}});}function whenClick3(){$.ajax( {url:'hello/hello3', //請求地址async: false, //異步開關type:'post', //請求方式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>
最后總結一小下：@ResponseBody是能夠讓后臺返回的數據自動轉換為json格式的，所以前臺ajax這里的data用json格式接受，如果是動態數組或者鏈表，則用
$.each(data, function (n, item) {});
來將它循環遍歷開。
有問題可以聯系我，以上！
總結
以上是生活随笔為你收集整理的html+spring boot简单的ajax数据传输实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring Boot整合Spring
- 下一篇： js校验复选框（多选按钮）是否被选中的方