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

原创 2017年09月04日 10:06:37

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

运行结果:



版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

设计基于HTML5的APP登录功能及安全调用接口的方式(原理篇)

最近发现群内大伙对用Hbuilder做的APP怎么做登录功能以及维护登录状态非常困惑,而我前一段时间正好稍微研究了一下,所以把我知道的告诉大家,节约大家查找资料的时间。 你是否真的需要登录功能? ...
  • linlzk
  • linlzk
  • 2015年05月06日 15:05
  • 25757

前端路上遇到的坑—跨域获取json格式的数据

LZ是一个前端菜鸟,入坑一年多,一直想写博客记录自己走过和填过的那些坑,却一直没有付之行动,最近刚辞职换工作了,轻松了很多,废话少说,开始我的博客之旅,希望可以帮到遇到同样问题的人,如果有错误的地方请...

异步获取数据Ajax,以及对获取的数据进行绑定(显示在页面上)

最近,经常用Ajax去异步获取数据,今天就把它总结一下 1.Ajax是异步的JavaScript和XML,它可以在不更新网页的情况下,从后台加载(获取)数据,并显示在网页上 2.主要方法 (1)...
  • muyeju
  • muyeju
  • 2015年09月09日 11:47
  • 8326

ajax请求数据,后台提供数据返回json, 前台js拼html,回填

ajax请求 /*全民看盘*/ $('#qmkp').click(function () { if($("#qmkps tr").length>0){ }else{ var Aj...
  • A9925
  • A9925
  • 2016年08月09日 14:40
  • 2251

AJAX调用接口实现静态页面局部动态化的简单例子

文件一:前端模板文件news.html。 用于嵌套php语句加载数据库内容后生产news.htmls静态文件。 文章首页 使用ajax请求的数据 ...

使用jquery+ajax实现页面访问后台接口

最近接触web应用,使用struts和spring的框架,先学会使用action来实现页面的跳转。有些时候不需要切换页面,完成操作也不能够刷新页面,这种场景下,就使用ajax来实现对后台接口的调用,而...

ajax请求接口里的数据,然后显示在页面里

$.ajax({ url:"这里是你要请求的地址", data:{"id":id}, //以键/值对的形式 async : false, dataType : "json", su...

HTML5 AJAX跨域请求

方法一:HTML5新的标准中,增加了” Cross-Origin Resource Sharing”特性,这个特性的出现使得跨域通信只需通过配置http协议头来即可解决。 Cross-Origin...
  • linlzk
  • linlzk
  • 2015年08月27日 15:27
  • 12406

使用jquery和html5 post json格式数据

创建html页面引入jQuery client.html: Test //引入3个jquery文件 $(function() { ...

手机android端的html5页面用ajax访问服务器,后台成功从数据库查询到值,但是前段一直调用ajax的error

原来代码: function gerflowerinfo(cateval,URL){ $.ajax({ url:URL,/...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5网页通过ajax跨域调用接口获取json数据并解析(一)
举报原因:
原因补充:

(最多只允许输入30个字)