HTML5网页通过ajax跨域调用接口获取json数据并解析(一)

最新推荐文章于 2024-04-28 04:09:01 发布

宝华的小岛

最新推荐文章于 2024-04-28 04:09:01 发布

阅读量3w

点赞数 4

分类专栏： Java JavaWeb IDE HTML5 Spring Idea 文章标签： html5 springboot 跨域 json

本文链接：https://blog.csdn.net/xxkalychen/article/details/77833524

版权

Java 同时被 3 个专栏收录

74 篇文章 1 订阅

订阅专栏

JavaWeb

27 篇文章 0 订阅

订阅专栏

Spring

21 篇文章 0 订阅

订阅专栏

接口使用Idea设计，返回json字符串。HTML5页面使用WebStorm设计，需要导入jquery。

设计接口需要有Gson包。

一、SpringBoot接口

@PostMapping("/getUserListJson")
    public String getUserListJson() {
        List<UserModel> userList = userRepository.getUserList();
        NetResult<List<UserModel>> netResult = new NetResult<>(0, "getUserListJson success", userList);
        String resultStr = new Gson().toJson(netResult);
        return resultStr;
    }

二、HTML5页面代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" Content="text/html; Charset=utf-8">
    <title></title>
    <!--<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>-->
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>
<form action="http://192.168.1.101:8080/getUserInfo" method="post">
    id:<input type="text" name="id"/><br>
    <input type="submit" value="Submit"/>
</form>

<a href="http://192.168.1.101:8080/getUserAllInfo?id=4">查询</a>
<div id="info"></div>
</body>
<script type="text/javascript">
    $(function () {
        $.ajax({
            type: 'post',
            url: 'http://192.168.1.101:8080/getUserListJson',
            async: true,
            jsonp: 'jsoncallback',
            success: function (data) {

//                $('#info').html(data);
                var result = $.parseJSON(data);
                var userList = result.data;

                var tabStr = "<table border='1'>";

                $.each(userList, function (i, user) {
                    tabStr += "<tr><td>" + user.id
                            + "</td><td>" + user.name
                            + "</td><td>" + user.password
                            + "</td><td>" + user.level
                            + "</td></tr>";
                });
                tabStr += "</table>";
                $('#info').html(tabStr);

            },
            error: function () {
                $('#info').html("有问题");
            }
        });

    });
</script>
</html>

三、调用会发现不成功，因为接口没有允许跨域访问。在接口工程中添加一个类即可。

/**
 * 设置文件
 * 允许跨域访问
 * 主要服务于前端对接口的调用
 */
@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1
        corsConfiguration.addAllowedHeader("*"); // 2
        corsConfiguration.addAllowedMethod("*"); // 3
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 4
        return new CorsFilter(source);
    }
}

运行结果：

宝华的小岛

关注

4
点赞
踩
36

收藏

觉得还不错? 一键收藏
3
评论
HTML5网页通过ajax跨域调用接口获取json数据并解析(一)

接口使用Idea设计，返回json字符串。HTML5页面使用WebStorm设计，需要导入jquery。设计接口需要有Gson包。一、SpringBoot接口@PostMapping("/getUserListJson") public String getUserListJson() { List userList = userRepository.getUs
复制链接

扫一扫