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

接口使用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);
    }
}

运行结果:



阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xxkalychen/article/details/77833524
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭