精华内容
下载资源
问答
  • 后端人员给我接口,让我直接调用接口获取json数据追加到页面上怎么弄?求教各位
  • ">div> body> <script type="text/javascript"> $(function(){ $.ajax({ type : 'post', url: baseUrl + "BIAction/buslineAttendance",//调用后台接口获取折线图上的数据 dataType: "jsonp", success:function...

    不说废话,注意:不要忘了引入JS

    <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.min.js"></script>
    

    折线图效果图:
    在这里插入图片描述
    代码:

    <body>
        <div id="main" style="width: 100%;height:400px;"></div>
    </body>
    
    
    <script type="text/javascript">
    		$(function(){
    		$.ajax({
    			type : 'post',
    			url: baseUrl + "BIAction/buslineAttendance",//调用后台接口获取折线图上的数据
                dataType: "jsonp",
                success:function(result){
                	var dataList = result.dataList;//这个是Y轴的数据
                	var dateList = result.dateList;//这个是X轴的日期
    
                	//基于准备好的dom,初始化echarts实例
            		var myChart = echarts.init(document.getElementById('main'));
            		option = {
            				tooltip: {
           					  // formatter: '{b0}<br />{a0}:{c0}<br />{a1}:{c1}%',
           					  trigger: 'axis',
           					  formatter: function (dataList) {
    							var html;       						  
           					    for(var i=0;i<dataList.length;i++){
           					        html = dataList[i].value+"%";//这里注意两个参数名不一样 data 和 date
           					    }
           					    return html;
           					  }
           					},
            				title: {
            	                text: '上座率'
            	            },
            	            grid: {
           				        left: '3%',
           				        right: '4%',
           				        bottom: '3%',
           				        containLabel: true
           				    },
            			    xAxis: {
            			        type: 'category',
            			        boundaryGap: [0, 0.01],
            			        data: result.dateList,
            			    },
            			    yAxis: {
            			        type: 'value'
            			    },
            			    color:["#7CBBF0"],
            			    series: [{
            			    	//color: '#275F82', //改变区域颜色
            			        data: result.dataList,
            			        type: 'line',
            			        smooth: true,
            			        showAllSymbol : true,
            			        lineStyle:{  //折线图上线的颜色
            			        	normal:{
            			        		color:"#7CBBF0",
            			        		width:3,
            			        	},
            			        },
            			        // 显示数值,折线图上的点
            			        itemStyle : { normal: {label : {show: true}}}
            			    }]
            			};
            			// 使用刚指定的配置项和数据显示图表。
            		    myChart.setOption(option);
                }
    		})
    	})
    <script>
    

    官方文档:https://echarts.apache.org/examples/zh/editor.html?c=line-simple

    展开全文
  • ajax接口获取数据

    千次阅读 2019-01-19 20:34:40
    现在大部分都是前后端分离的项目,需要我们通过接口获取数据,其实和传统的差不多,没必要把调接口数据想象的那么难和高大上(#^.^#) 仅举例说明 写一个getUser.json { "code":1, "msg":&...

    现在大部分都是前后端分离的项目,需要我们通过接口获取数据,其实和传统的差不多,没必要把调接口数据想象的那么难和高大上(#^.^#)

    仅举例说明

    写一个getUser.json

    {
    	"code":1,
    	"msg":"获取成功",
    	"data":{
    		"id":1,
    		"uid":358,
    		"name":"hhh",
    		"sex":"男",
    		"img":"1000",
    		"number":1003,
    		"allow_number":1
    	}
    }

    用ajax调用这个数据

        var RUL_list = 'http://你的路径/getUser';
    	$.ajax({
    		type:'post',
            url: RUL_list,
            data:{'access_token':token,'aid':2},
            dataType : 'json',
            async : true, //默认为true 异步
            success:function(data){
                console.log(data.data);
                if(data.code == '1'){
    //              $.each(data.data,function(key,arr){ 
    		            var str ="<div id='xx'>"
    					  + "<div class='name'>"+data.data.id+"号:"+data.data.name+" ("+data.data.sex+")</div>"
    					  + "<div class='n-father'>"
    					  + "<div class='n-left'>当前排名:<br /><span >"+data.data.paiming+"</span></div>"
    					  + "</div>";
    				
    		            $("#content").prepend(str);
    		           
    //		          });
                }else if(data.code == '4' ){
                	 
                	   $("#content").html("你没权限!");
                	
                }
            },
            error:function(data){
    //          alert(data.code);
    			
            }
        });
        

    相应的页面

    <div id=content></div>

     

    展开全文
  • 举个栗子,比如说调用聚合数据的微信精选接口获得微信新闻数据,前端使用ajax,请求访问springboot程序,boot再请求聚合数据接口,拿到返回结果集并在页面显示出来,按钮可以切换新闻,就像这样子: 由此看出,咱...

    举个栗子,比如说调用聚合数据的微信精选接口获得微信新闻数据,前端使用ajax,请求访问springboot程序,boot再请求聚合数据接口,拿到返回结果集并在页面显示出来,按钮可以切换新闻,就像这样子:
    在这里插入图片描述
    由此看出,咱使用了bootstrap萌萌的圆角按钮,证明你得引入jq和bootstrap~
    回归正题,我们先看文档,参考聚合数据:微信精选
    为了简化参数,咱只传入一个页数,留作切换,大家可以根据需要进行参数的传递。
    从页面开始(bootstrap风格~):

    <div class="col-lg-4 col-md-4">
    				<div class="event-info">
    					<h4 class="text-center slideanim"><span id="we_title"></span></h4>
    					<p class="eve slideanim"><span id="we_desc"></span><br/>
    						<span id="we_mark"></span><br/>
    						<img width="400" height="300" id="we_img" alt="" />
    						<a id="we_read" target="_blank" class="btn btn-success">阅读本条</a>
    						<a href="javascript:;" id="change_we" class="btn btn-success">切</a>
    					</p>
    				</div>
    			</div>
    

    然后,就要想到,页面加载的时候发起一个ajax,请求到新闻数据,而后,每单击一次切换则切换新闻,因此,需要将ajax放入一个方法中:

    var req_wepick = "http://你服务器的IP或域名:boot程序端口号/wepick";   //微信精选 参数page 页数
    var we_index = 1;  //从第一条开始
    $(function(){
    	getWeNews();	//页面加载获取新闻
    });
    // 微信精选切换获得新闻
    $('#change_we').click(function(){
    	we_index += 1;	//获得下一条新闻
    	getWeNews();
    });
    function getWeNews(){
    $.ajax({
        	type: 'get',
        	url: req_wepick +"?page="+ we_index,
        	success: function(data){	// 微信精选  
        		$('#we_title').text(data.result.list[0].source);
        		$('#we_desc').text(data.result.list[0].title);
        		$('#we_mark').text(data.result.list[0].mark);
        		$('#we_read').attr("href",data.result.list[0].url);
        		$('#we_img').attr("src",data.result.list[0].firstImg);
          		console.log(data);
        	},
        	error: function(data){}
    	});
    }
    

    然后就是后端服务接收请求并实现从接口获取数据了;项目简便使用,咱是先不考虑安全因素,直接交由控制器实现:

    //02005.微信精选  https://www.juhe.cn/docs/api/id/147
        @ResponseBody   //响应写到body中
        @CrossOrigin   //跨域支持
        @GetMapping(value = "wepick")
        public Map getWeChatPick(@RequestParam("page") int page) throws Exception{
            EncryptUtil des = new EncryptUtil(API.ENCRYPT_KEY, "utf-8");  // 这句是我接口的加密,可忽略
            Map req_param = new HashMap();   // 请求参数
            req_param.put("key", des.deCode(API.JUHE_WEIXIN_KEY));  // 你的聚合数据key
            req_param.put("ps", 1); // 每页条数
            req_param.put("pno", page); // 页数
            req_param.put("dtype","json");
            String res = NetTool.getNetData("http://v.juhe.cn/weixin/query", req_param, "GET");   // 这个是封装的一个请求方法,具体见下面
            JSONObject obj = JSONObject.parseObject(res);
            Map map = obj.getInnerMap();
            return map;
        }
        // 网络相关工具类,参考官方修改------------------
        import java.io.*;
    import java.net.HttpURLConnection;
    import java.net.URL;
    import java.net.URLEncoder;
    import java.util.Map;
    
    /**
     * 网络连接相关工具类
     */
    public class NetTool {
        public static final String userAgent = "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36";
        public static final int DEF_CONN_TIMEOUT = 30000;
        public static final int DEF_READ_TIMEOUT = 30000;
        public static final String DEF_CHATSET = "UTF-8";
    
        /**
         * 创建Http连接并调用接口数据
         */
        public static String getNetData(String strUrl, Map param, String method) throws Exception{
            HttpURLConnection conn = null;
            BufferedReader reader = null;
            String res = null;
            try {
                StringBuffer sb = new StringBuffer();
                if(null == method || "GET".equals(method)){
                    strUrl = strUrl + "?" + urlEncode(param);
                }
                URL url = new URL(strUrl);
                conn = (HttpURLConnection) url.openConnection();
                if(null == method || "GET".equals(method)){
                    conn.setRequestMethod("GET");
                }else{
                    conn.setRequestMethod("POST");
                    conn.setDoOutput(true);
                }
                conn.setRequestProperty("User-agent",userAgent);
                conn.setUseCaches(false);
                conn.setConnectTimeout(DEF_CONN_TIMEOUT);
                conn.setReadTimeout(DEF_READ_TIMEOUT);
                conn.setInstanceFollowRedirects(false);
                conn.connect();
                if (null != param && "POST".equals(method)){
                    try {
                        DataOutputStream dos =new DataOutputStream(conn.getOutputStream());
                        dos.writeBytes(urlEncode(param));
                    } catch (Exception e){
                        e.printStackTrace();
                    }
                }
                InputStream is = conn.getInputStream();
                reader = new BufferedReader(new InputStreamReader(is, DEF_CHATSET));
                String strRead = null;
                while (null != (strRead = reader.readLine())){
                    sb.append(strRead);
                }
                res = sb.toString();
            }catch (IOException e){
                e.printStackTrace();
            }finally {
                if (null != reader){
                    reader.close();
                }
                if (null != conn){
                    conn.disconnect();
                }
            }
            return res;
        }
    
        /**
         * 转码
         */
        public static String urlEncode(Map<String,Object>data){
            StringBuilder sb = new StringBuilder();
            for (Map.Entry i : data.entrySet()) {
                try {
                    sb.append(i.getKey()).append("=").append(URLEncoder.encode(i.getValue()+"","UTF-8")).append("&");
                } catch (UnsupportedEncodingException e){
                    e.printStackTrace();
                }
            }
            return sb.toString();
        }
    }
    

    OK,就这么些了,大家有什么看法,欢迎留言。

    展开全文
  • 接口使用Idea设计,返回json字符串。HTML5页面使用WebStorm设计,需要导入jquery。 设计接口需要有Gson包。 一、SpringBoot接口 @PostMapping("/getUserListJson") public String getUserListJson() { List ...

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

    运行结果:



    展开全文
  • 前段时间在做项目的时候遇到一个问题,在开发webapp的时候使用ajax调用后端接口的时候,出现了接口数据错乱的问题,现在总结一下问题描述: 同一个页面同时调用多个接口:A、B、C、D、E,正常返回结果应该是A-a, B-...
  • ----------------------------------------------------------------- ajax 调用接口---------------------------------------------------  $(document).ready(function () {  $.ajax({
  • 既然要做APP,与接口交互式少不了的,除非只是想做一个纯静态的APP。...看了下这个文件的代 码,它的功能就是点击“提交”按钮后提交参数给接口,然后根据选择的返回数据格式,将一段字符串打印出来。我准备改造
  • 这里用于Ajax跨域请求访问。 $.getJSON("http://22.11.87.80:8080/ibas/searchSolr","parmas="+params,function(data){ //对data数据进行处理 alert(data); console.log(data); });  
  • 该示例为根据经纬度对离线地图实现标点,从后台返回数据,页面用ajax调用接口获取json数据,用OpenLayers实现离线地图的发布,里面包含了示例区域的离线地图瓦片以及网页Demo。
  • Ajax调用后台数据接口

    千次阅读 2019-04-08 21:06:31
    var param = { "args": { "key": value }, "bizData": "string", "sign": "string", "token": "string" }; $.ajax({ type: "POST", url: "", contentType: "application/jso...
  • ajax 调用接口,如何实现 html5页面 展示app上的 内容 接口文档也有 上级给我 一个模板 自己研究 有没有人 给点 提示 ,给点思路什么的? ![图片说明]...
  • jsp代理实现ajax跨域调用获取数据

    千次阅读 2016-04-27 12:05:33
    请求url获取数据 if ( url != null ) { // 使用GET方式向目的服务器发送请求 URL connect = new URL ( url . toString ()); URLConnection connection = connect . openConnection ...
  • 通过js 和html 页面显示更多,通过ajax 调用后台java 接口返回数据
  • ajax 数据交互 接口调用

    千次阅读 2017-08-12 19:26:37
    ajax 请求 jQuery ajax 请求 ajax post请求 ajax get请求 ajax 接口调用
  • 3:前端ajax调用接口方式

    千次阅读 2019-09-27 20:41:10
    前端调用后台接口的几种方式 版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/jitianxia68/article/details/78393406 一、Ajax方式 ...
  • 原生js实现ajax调用接口功能

    千次阅读 2019-12-01 20:22:00
    //1 封装ajax function ajax(option){ //创建异步对象 var xhr = null; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new Activ...
  • 问题描述: ...思路:使用Promise,将调用接口的函数转变为一个Promise对象,定义全局变量数组,在循环中将Promise对象push到数组中,然 后用Promise.all()执行接口调用,在调用成功后执行绘图操...
  • 在页面加载时,就需要显示在页面上的数据,可以在后台使用this.assign赋值,在前台通过ejs等模板...(ps:ajax调用后台接口的情形通常是用户触发事件,给后台传递一些前台的数据,然后后台根据这些数据进行相关操作,再
  • ajax调用返回php接口返回json数据

    万次阅读 2016-05-13 18:45:57
    解析json数据。从上面的javascript中可以看到,我没有使用jquery.parseJSON()这些方法,开始使用这些方法,但是总是会报 VM219:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1 的错误...
  • 原生js调用接口数据和JQuery中Ajax调用接口 原生js: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js调接口</title> </head> <body&...
  • jQuery调用接口获取城市天气信息,代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
  • thinkjs学之前后台交互方法:this.assign传递数据ajax调用后台接口
  • jQuery中Ajax调用后台接口

    千次阅读 2017-07-26 11:05:16
    获取数组中的数据imageUrl function loadXMLDoc() { var xmlhttp; var text; if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }
  • //获取地址栏参数 function GetQueryString(name){  var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");  var r = window.location.search.substr(1).match(reg);  if(r!=null)return unescape...
  • ajax传送json格式数据,关键是指定contentType,data要是json格式 var post_data={"name":"test001","pass":"xxxx"}; $.ajax({ url: "http://192.168.10.111:8080/uc/login", type: 'post', contentType: ...
  • 主要介绍了基于iframe实现ajax跨域请求,并获取网页中ajax数据,如何利用网页ajax请求暴露出来的接口去抓取网页数据?需要的朋友可以参考下
  • 使用Vue+AJAX调用WebService接口

    千次阅读 2018-12-13 20:13:18
    这里介绍的是在本地IIS...新建一个空网站,添加一个WEN服务(ASMX),编写一个方法从数据库获取数据,这是我的方法: [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo...
  • 假设我们的问题是:1、要查询叫XXX_class的类,该类有名为xxx的pointer型字段指向另外一个class; 2、查询条件是yyy字段的值等于...用JS通过Ajax调用数据云API的REST接口获取数据的方法如下(已包含必要的解释):
  • 前端初学者一看就懂:Ajax调用后台接口案例

    万次阅读 多人点赞 2018-09-15 16:03:09
    一直以来很多初学者对于ajax调用后台接口总是不能很明白,以下这个案例,能很清楚的过程展现给大家: 首先,要做这个功能前,我们必须先查阅后台接口文档,了解使用登录接口时,需要提交哪些参数,并且接口使用返回...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 62,507
精华内容 25,002
关键字:

ajax调用接口获取数据