前后端ajax和json數(shù)據(jù)交換方式

更新時(shí)間：2023年06月05日 09:45:59 作者：swttws.

這篇文章主要介紹了前后端ajax和json數(shù)據(jù)交換方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

前后端ajax和json數(shù)據(jù)交換

控制層返回json字符串?dāng)?shù)據(jù)給前端，前端通過(guò)ajax處理將數(shù)據(jù)展示給用戶(hù)。

下面通過(guò)一個(gè)小案例來(lái)講解

首先需要搭建springMVC框架環(huán)境，可以參考為之前的文章

format,png

編寫(xiě)一個(gè)實(shí)體類(lèi)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;
    }
}

第一個(gè)案例

controller返回一個(gè)學(xué)生信息數(shù)組，前端獲取并打印到界面

寫(xiě)一個(gè)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;
//該注解相當(dāng)于@responseBody+@Controller
@RestController
public class UserController {
    //返回學(xué)生信息的集合
    @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頁(yè)面，注意jquery的版本不能太低，版本低的用不了$.post方法

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax</title>
    <%--    注意路徑問(wèn)題,導(dǎo)入jquery--%>
    <script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>
</head>
<body>
<script type="text/javascript">
    $(function () {
        //獲取學(xué)生數(shù)據(jù)
        $("#btn").click(function () {
            //post請(qǐng)求處理后端傳來(lái)的數(shù)據(jù)
            //data封裝了服務(wù)器返回的數(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ù)顯示在頁(yè)面上
                $("#context").html(html)
            })
        })
    })
</script>
<input type="button" id="btn" value="獲取學(xué)生數(shù)據(jù)" >
<table border="1" cellspacing="0" style="width: 50%" align="center">
    <tr>
        <td>姓名</td>
        <td>密碼</td>
        <td>性別</td>
    </tr>
    <!--后端傳來(lái)的數(shù)據(jù)打印于此-->
    <tbody id="context">
    </tbody>
</table>
</body>
</html>

format,png

點(diǎn)擊獲取數(shù)據(jù)，則會(huì)打印后臺(tái)傳來(lái)的數(shù)據(jù)

format,png

第二個(gè)案例

模擬登錄，運(yùn)用onblur焦點(diǎn)失去事件，當(dāng)我們輸入完一個(gè)值，ajax會(huì)幫我們驗(yàn)證用戶(hù)名，密碼是否正確

寫(xiě)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="";
        //要先判斷用戶(hù)名是否為空
        if(username!=null)
        {
            //這里用戶(hù)名寫(xiě)死為admin
            if ("admin".equals(username)) {
                message="成功";
            }else {
                message="用戶(hù)名錯(cuò)誤";
            }
        }
        //先判斷密碼是否為空
        if(password!=null)
        {
            //這里密碼寫(xiě)死為123456
            if(password.equals("123456")){
                message="成功";
            }else {
                message="密碼錯(cuò)誤";
            }
        }
        //返回message到前端
        return message;
    }
}

前端頁(yè)面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>
        //驗(yàn)證用戶(hù)名是否正確
        function a1() {
            //{"username":$("#username").val()}為傳入后端的參數(shù)值
            $.post("${pageContext.request.contextPath}/login",{"username":$("#username").val()},function (data) {
                if (data.toString()=="成功"){//表示用戶(hù)名正確
                    $("#name").css("color","green")
                }else {
                    $("#name").css("color","red")
                }
                $("#name").html(data)
            })
        }
        //驗(yàn)證密碼是否正確
        function a2() {
            $.post("${pageContext.request.contextPath}/login",{"password":$("#password").val()},function (data) {
                if (data.toString()=="成功"){//表示用戶(hù)名正確
                    $("#ped").css("color","green")
                }else {
                    $("#ped").css("color","red")
                }
                $("#ped").html(data)
            })
        }
    </script>
</head>
<body>
<p align="center">
    <!--onblur焦點(diǎn)失去事件，鼠標(biāo)一離開(kāi)即觸發(fā)事件-->
    用戶(hù)名：<input type="text" id="username" onblur="a1()">
    <!--用于寫(xiě)提示信息-->
    <span id="name"></span>
</p>
<p align="center">
     密碼：<input type="text" id="password" onblur="a2()">
    <!--用于寫(xiě)提示信息-->
    <span id="ped"></span>
</p>
</body>
</html>