前后端ajax和json数据交换

控制层返回json字符串数据给前端，前端通过ajax处理将数据展示给用户。下面通过一个小案例来讲解

首先需要搭建springMVC框架环境，可以参考为之前的文章

编写一个实体类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返回一个学生信息数组，前端获取并打印到界面

写一个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 getUser(){
        List 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" %>


    
    <%--    注意路径问题,导入jquery--%>
    







    

        
姓名
        
密码
        
性别
    
    
    


    

点击获取数据，则会打印后台传来的数据

第二个案例，模拟登录，运用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" %>


    
    
    



    
    用户名：
    
    


     密码：
    
    

测试如下

当我们输入用户名和密码后，会进行相应判断

这样就模拟完成json和ajax数据交互。

2021最后一篇文章，2022继续加油！