前后端ajax和json數(shù)據(jù)交換方式
目錄
前后端ajax和json數(shù)據(jù)交換
控制層返回json字符串數(shù)據(jù)給前端，前端通過ajax處理將數(shù)據(jù)展示給用戶。
下面通過一個小案例來講解
首先需要搭建springmvc框架環(huán)境，可以參考為之前的文章
編寫一個實體類user
package com.pojo;
public class user {
private string username;
private string password;
private string sex;
@override
public string tostring() {
return "user{" +
"username='" + username + ''' +
", password='" + password + ''' +
", sex='" + sex + ''' +
'}';
}
public user() {
}
public string getusername() {
return username;
}
public void setusername(string username) {
this.username = username;
}
public string getpassword() {
return password;
}
public void setpassword(string password) {
this.password = password;
}
public string getsex() {
return sex;
}
public void setsex(string sex) {
this.sex = sex;
}
public user(string username, string password, string sex) {
this.username = username;
this.password = password;
this.sex = sex;
}
}第一個案例
controller返回一個學生信息數(shù)組，前端獲取并打印到界面
寫一個usercontroller控制器
package com.controller;
import com.pojo.user;
import org.springframework.web.bind.annotation.requestmapping;
import org.springframework.web.bind.annotation.restcontroller;
import java.util.arraylist;
import java.util.list;
//該注解相當于@responsebody+@controller
@restcontroller
public class usercontroller {
//返回學生信息的集合
@requestmapping("/user")
public list<user> getuser(){
list<user> users = new arraylist<>();
user user = new user("小明","123456","男");
user user1 = new user("小紅","123456","女");
user user2 = new user("小白","123456","男");
user user3 = new user("小李","123456","女");
users.add(user);
users.add(user1);
users.add(user2);
users.add(user3);
return users;
}
}index.jsp頁面，注意jquery的版本不能太低，版本低的用不了$.post方法
<%@ page contenttype="text/html;charset=utf-8" language="java" %>
<html>
<head>
<title>ajax</title>
<%-- 注意路徑問題,導入jquery--%>
<script src="${pagecontext.request.contextpath}/static/js/jquery-3.6.0.js"></script>
</head>
<body>
<script type="text/javascript">
$(function () {
//獲取學生數(shù)據(jù)
$("#btn").click(function () {
//post請求處理后端傳來的數(shù)據(jù)
//data封裝了服務器返回的數(shù)據(jù)
$.post("${pagecontext.request.contextpath}/user",function (data) {
console.log(data)
var html=""
for (var i=0;i<data.length;i++){
html+="<tr>"+"<td>"+data[i].username+"</td>"+
"<td>"+data[i].password+"</td>"+
"<td>"+data[i].sex+"</td>"+"</tr>"
}
//數(shù)據(jù)顯示在頁面上
$("#context").html(html)
})
})
})
</script>
<input type="button" id="btn" value="獲取學生數(shù)據(jù)" >
<table border="1" cellspacing="0" style="width: 50%" align="center">
<tr>
<td>姓名</td>
<td>密碼</td>
<td>性別</td>
</tr>
<!--后端傳來的數(shù)據(jù)打印于此-->
<tbody id="context">
</tbody>
</table>
</body>
</html>
點擊獲取數(shù)據(jù)，則會打印后臺傳來的數(shù)據(jù)
第二個案例
模擬登錄，運用onblur焦點失去事件，當我們輸入完一個值，ajax會幫我們驗證用戶名，密碼是否正確
寫logincontroller控制器
package com.controller;
import org.springframework.web.bind.annotation.requestmapping;
import org.springframework.web.bind.annotation.restcontroller;
@restcontroller
public class logincontroller {
@requestmapping("/login")
public string login(string username,string password){
string message="";
//要先判斷用戶名是否為空
if(username!=null)
{
//這里用戶名寫死為admin
if ("admin".equals(username)) {
message="成功";
}else {
message="用戶名錯誤";
}
}
//先判斷密碼是否為空
if(password!=null)
{
//這里密碼寫死為123456
if(password.equals("123456")){
message="成功";
}else {
message="密碼錯誤";
}
}
//返回message到前端
return message;
}
}前端頁面login.jsp
<%--
created by intellij idea.
user: 21781
date: 2021/12/31
time: 19:07
to change this template use file | settings | file templates.
--%>
<%@ page contenttype="text/html;charset=utf-8" language="java" %>
<html>
<head>
<title>title</title>
<script src="${pagecontext.request.contextpath}/static/js/jquery-3.6.0.js"></script>
<script>
//驗證用戶名是否正確
function a1() {
//{"username":$("#username").val()}為傳入后端的參數(shù)值
$.post("${pagecontext.request.contextpath}/login",{"username":$("#username").val()},function (data) {
if (data.tostring()=="成功"){//表示用戶名正確
$("#name").css("color","green")
}else {
$("#name").css("color","red")
}
$("#name").html(data)
})
}
//驗證密碼是否正確
function a2() {
$.post("${pagecontext.request.contextpath}/login",{"password":$("#password").val()},function (data) {
if (data.tostring()=="成功"){//表示用戶名正確
$("#ped").css("color","green")
}else {
$("#ped").css("color","red")
}
$("#ped").html(data)
})
}
</script>
</head>
<body>
<p align="center">
<!--onblur焦點失去事件，鼠標一離開即觸發(fā)事件-->
用戶名：<input type="text" id="username" onblur="a1()">
<!--用于寫提示信息-->
<span id="name">
</p>
<p align="center">
密碼：<input type="text" id="password" onblur="a2()">
<!--用于寫提示信息-->
<span id="ped">
</p>
</body>
</html>測試如下
當我們輸入用戶名和密碼后，會進行相應判斷
這樣就模擬完成json和ajax數(shù)據(jù)交互。
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持碩編程。
學習AJAX