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
  • 28324

解决ajax跨域访问获取数据返回json的方法

前段时间需要做一个iOSAPP  ,但是数据需要从服务器上获取,就想到了接口的办法,html页面获取上传到服务器上的数据,发现在使用ajax提交返回json时候,提示No 'Access-Contro...
  • daijiangping
  • daijiangping
  • 2016年10月25日 23:38
  • 2663

Jquery 使用Ajax获取后台返回的Json数据后,页面处理

$(function () { $.ajax({ url: 'jsondata.ashx', type: 'GET', ...
  • smartsmile2012
  • smartsmile2012
  • 2013年12月09日 11:38
  • 241580

HTML5中使用JSON对象存取数据

HTML5中可以通过localStorage数据与JSON对象的转换,快速实现存储更多数据的功能。 将localStorage数据转成JSON对象,需要调用JSON对象的parse()方法,...
  • small_rice_
  • small_rice_
  • 2014年03月18日 16:21
  • 5362

HTML5怎么读取json文件

利用getJson()函数获取json文件 getJson(url,[data],[Callback]),对具体的参数解释如下:             url:加载的页面地址            ...
  • jsonsobaby
  • jsonsobaby
  • 2015年11月12日 20:31
  • 8014

使用jquery和html5 post json格式数据

创建html页面引入jQuery client.html: Test //引入3个jquery文件 $(function() { ...
  • marujunyy
  • marujunyy
  • 2013年01月04日 21:32
  • 2395

HTML5与window.JSON

JSON是一种相对来说比较新并且正在日益流行的数据交换格式。作为JavsScript语法的一个子集,它将数据表示为对象字面量。由于其语法简单和在javascript编程中与生俱来的兼容性,JSON变成...
  • zcc71
  • zcc71
  • 2013年04月02日 10:40
  • 751

html5解析json

Window.JSON                    解析json字符串       json对象转换为json字符串   ...
  • chuanyu
  • chuanyu
  • 2015年05月22日 18:04
  • 2197

关于html5--localStorage 储存json

关于html5--localStorage 储存json 以及json的 嵌套
  • ling369523246
  • ling369523246
  • 2016年03月03日 17:47
  • 1585

Html5中JSON对象与String的互相转换

面对现在移动端的迅速发展,提供数据的方式不在是以前的PC-->PC界面了,这促使了JSON格式的使用,在H5以前的JS中,我在前面的一个H4中JS对JSON中的处理提到了eval方法,eval()  ...
  • u011730649
  • u011730649
  • 2015年01月27日 22:08
  • 5781
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:HTML5网页通过ajax跨域调用接口获取json数据并解析(一)
举报原因:
原因补充:

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