JavaScript加载json数据错误解决

JavaScript加载json数据错误解决

  这个问题花了一天才解决,必须将这个悲伤的经历记录下来。

  • 引言

  这两天为了完成物联网实时数据分析服务前端可视化的设计,需要用到Echarts扩展的百度地图API来完成热力图的显示,因此到Echarts官网去看demo,然后copy了demo上的代码直接放到JSP文件中,有兴趣可以去Echarts官网去找。然而,我的问题出现在,其源码中是用jQuery+xajax中的方法$.get()来获取本地的json文件,但是我将项目发布到Tomcat上的时候无法获取到json文件,提示http500error。

  • 问题查询过程

一开始并不知道是json文件无法获取,以为是引用的jQuery.js文件不成功,但是在浏览器f12控制台中无任何错误。同时我发现在Echarts的官网教程中有一部分是专门讲解数据异步加载的,这里面同时也提到了¥$.get(),后来是在f12的网络中发现了如下的信息:
图片描述

图片描述

这才完成确定是因为Tomcat无法获取到json文件,因此在百度上搜了半天。

  • 解决结果

最终在百度上搜到简书上的一个方法https://www.jianshu.com/p/a7a...

在web.xml配置文件中添加以下代码:

  <servlet-mapping>   <!--解决了json无法调用的问题-->
    <servlet-name>default</servlet-name>
    <url-pattern>/json/*</url-pattern>
  </servlet-mapping>

我的maven springmvc项目目录如下:
图片描述

  • 深入理解

  接下来我还需要了解一下<servlet-mapping>在web.xml中的作用,和为什么Tomcat没有这一项设置就无法加载json文件?
解决:Servlet-mapping是什么都可以在其他博客上找到,其实上述的方法就是配置了Servlet来找到json静态文件,
  在后期的工作中会将项目放到服务器上,会不会还会出什么问题,都需要进一步了解。待续。。。项目托管在码云上。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AJAX(Asynchronous JavaScript and XML)是一种网页开发技术,它允许前端JavaScript在不刷新整个页面的情况下向服务器请求和接收数据。当需要从服务器获取JSON数据时,AJAX通常会用到以下几个步骤: 1. 创建XMLHttpRequest对象:这是AJAX的核心部分,用于发起HTTP请求。 ```javascript var xhr = new XMLHttpRequest(); ``` 2. 打开连接并设置请求方法(GET或POST)、URL以及响应类型(对于JSON通常是`application/json`)。 ```javascript xhr.open('GET', 'your-url.json', true); xhr.responseType = 'json'; ``` 3. 定义回调函数:当服务器返回响应时,这个函数会被调用。在这个函数中处理服务器返回的JSON数据。 ```javascript xhr.onload = function() { if (xhr.status === 200) { var data = xhr.response; // JSON数据 console.log(data); // 在这里解析并操作数据 } else { console.error('Request failed. Returned status of ' + xhr.status); } }; ``` 4. 发送请求:调用`send()`方法发送请求。 ```javascript xhr.send(); ``` 5. 错误处理:添加错误事件监听器来捕获网络请求可能出现的问题。 ```javascript xhr.onerror = function() { console.error('There was a problem with the request.'); }; ``` 总之,AJAX取JSON数据就是通过上述步骤异步地从服务器获取数据,并在客户端以JSON格式解析和处理这些数据。这种方式提高了用户体验,因为他们不需要等待整个页面加载完毕才能看到新数据
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值