前后端ajax和json数据交换方式

更新时间：2023年06月05日 09:45:59 作者：swttws.

这篇文章主要介绍了前后端ajax和json数据交换方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

前后端ajax和json数据交换

控制层返回json字符串数据给前端，前端通过ajax处理将数据展示给用户。

下面通过一个小案例来讲解

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

format,png

编写一个实体类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<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="http://9i0i.com/pic.php?p=${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>
</head>
<body>
<script type="text/javascript">
    $(function () {
        //获取学生数据
        $("#btn").click(function () {
            //post请求处理后端传来的数据
            //data封装了服务器返回的数据
            $.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>"
                }
                //数据显示在页面上
                $("#context").html(html)
            })
        })
    })
</script>
<input type="button" id="btn" value="获取学生数据" >
<table border="1" cellspacing="0" style="width: 50%" align="center">
    <tr>
        <td>姓名</td>
        <td>密码</td>
        <td>性别</td>
    </tr>
    <!--后端传来的数据打印于此-->
    <tbody id="context">
    </tbody>
</table>
</body>
</html>

format,png

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

format,png

第二个案例

模拟登录，运用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="http://9i0i.com/pic.php?p=${pageContext.request.contextPath}/static/js/jquery-3.6.0.js"></script>
    <script>
        //验证用户名是否正确
        function a1() {
            //{"username":$("#username").val()}为传入后端的参数值
            $.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焦点失去事件，鼠标一离开即触发事件-->
    用户名：<input type="text" id="username" onblur="a1()">
    <!--用于写提示信息-->
    <span id="name"></span>
</p>
<p align="center">
     密码：<input type="text" id="password" onblur="a2()">
    <!--用于写提示信息-->
    <span id="ped"></span>
</p>
</body>
</html>

测试如下

format,png

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

format,png

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持程序员之家。

您可能感兴趣的文章:

好用的AJAX类代码分享
好用的AJAX类代码分享，需要的朋友可以参考下。
2011-11-11
[asp]天枫AJAX百度音乐即时听附下载
[asp]天枫AJAX百度音乐即时听附下载...
2007-09-09
Ajax的jsonp方式跨域获取数据的简单实例
下面小编就为大家带来一篇Ajax的jsonp方式跨域获取数据的简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
jQuery ajax中使用serialize()方法提交表单数据示例
使用jQuery ajax的serialize() 方法表单序列化为键值对（key1=value1&key2=value2…）后提交，下面是使用serialize()序列化表单的实例，感兴趣的朋友可以参考下
2013-10-10
用AJAX技术实现在自己Blog上聚合并显示朋友Blog的最新文章
在自己Blog上聚合并显示朋友Blog的最新文章，这样方便自己及时了解朋友的消息，另外，也方便访问者找到和本Blog相关的blog和文章
2014-05-05
AJAX应用实例之检测用户名是否唯一(实例代码)
本文通过实例代码给大家介绍了AJAX应用实例之检测用户名是否唯一，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-09-09
AJAX和WebService实现省市县三级联动具体代码
AJAX和WebService实现省市县三级联动效果，在浏览网页的时候经常会遇到过，下面与大家分享下具体的实现步骤
2013-05-05
Ajax按需读取数据生成下级菜单
Ajax按需读取数据生成下级菜单...
2006-08-08
ajax的两种提交方式(get/post)和两种版本
本篇也用encodeURI对字符串做了加密，并在类里做了解码，其中需要一些注意的地方在源码里做了注释。get/post两种提交方式，但get提交容易乱码，一定多加注意
2013-09-09
jQuery的ajax传参巧用JSON使用示例(附Json插件)
jQuery的ajax调用很方便，传参的时候喜欢用Json的数据格式，使用示例代码如下，感兴趣的朋友可以参考下，希望对大家有所帮助
2013-08-08