Javascript JSON数据不是来自txt文件_Javascript_Json_Tomcat

Javascript JSON数据不是来自txt文件

javascript json tomcat

Javascript JSON数据不是来自txt文件,javascript,json,tomcat,Javascript,Json,Tomcat,我在一个名为“hello”的文件夹中创建了两个文件index.html和jsontext.txt index.html <!DOCTYPE html> <html> <head> <title>Experiment</title> </head> <body> <p id="demo"></p> <script> var a=""; var b=

我在一个名为“hello”的文件夹中创建了两个文件index.html和jsontext.txt

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Experiment</title>
</head>
<body>
    <p id="demo"></p>
<script>
    var a="";
    var b="";
    var xmlhttp=new XMLHttpRequest;
    var url="hello/jsontext.txt";
    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState==4&&xmlhttp.status==200){
            var values=JSON.parse(xmlhttp.responseText);
            a=values.name;
            b=values.pwd;
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
    document.getElementById("demo").innerHTML=a+" "+b;
</script>
</body>
</html>

我将文件夹hello移动到tomcat webapps文件夹。启动tomcat，然后打开页面说

localhost:8080/hello/index.html

页面正在加载，但没有值。如何从JSON到javascript检索数据

对不起，这太傻了。我正在学习编码，甚至这个程序也是其中的一部分。所以请帮忙

编辑

<!DOCTYPE html>
<html>
<head>
<title>Track Page</title>
<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
  }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAVD0ngfhOFs5rnww7UFyz9rN6UznOIZ1U&callback=initMap"
    async defer></script>
  <script>
  var http=new XMLHttpRequest();
  var url="jsontext.txt";
  var marker;
  var user_lat,user_lng;
  function initMap() {

        http.onreadystatechange = function(){
        if(http.readyState == 4 && http.status == 200){
            var coordinates=JSON.parse(http.responseText);
            user_lat=coordinates.latitude;
            user_lng=coordinates.longitude;
            var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: user_lat, lng: user_lng},
            zoom: 8
            });
                marker = new google.maps.Marker({
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP,
                label:'Driver1',
                position: {lat: user_lat, lng: user_lng}
            });
            marker.addListener('click', toggleBounce);
        }
     }
     http.open("GET",url,true);
     http.send();
  }
  function toggleBounce() {
    if (marker.getAnimation() !== null) {
        marker.setAnimation(null);
      } else {
      marker.setAnimation(google.maps.Animation.BOUNCE);
    }
  }

  </script>
</body>


曲目页
html，正文{
身高：100%；
保证金：0；
填充：0；
}
#地图{
身高：100%；
}
var http=new XMLHttpRequest（）；
var url=“jsontext.txt”；
var标记；
var用户lat、用户lng；
函数initMap（）{
http.onreadystatechange=函数（）{
如果（http.readyState==4&&http.status==200）{
var坐标=JSON.parse（http.responseText）；
用户_lat=坐标。纬度；
用户_lng=坐标。经度；
var map=new google.maps.map（document.getElementById（'map'）{
中心：{lat:user_lat，lng:user_lng}，
缩放：8
});
marker=新的google.maps.marker({
地图：地图，
真的，
动画：google.maps.animation.DROP，
标签：'Driver1'，
位置：{lat:user_lat，lng:user_lng}
});
marker.addListener（'click'，toggleBounce）；
}
}
http.open（“GET”，url，true）；
http.send（）；
}
函数toggleBounce（）{
if（marker.getAnimation（）！==null）{
marker.setAnimation（null）；
}否则{
setAnimation（google.maps.Animation.BOUNCE）；
}
}

AJAX是异步的。在AJAX响应发生之前，您正在将

和

放入

innerHTML

。您需要在回调函数中执行此操作

xmlhttp.onreadystatechange = function(){
    if(xmlhttp.readyState==4&&xmlhttp.status==200){
        var values=JSON.parse(xmlhttp.responseText);
        a=values.name;
        b=values.pwd;
        document.getElementById("demo").innerHTML=a+" "+b;
    }
}

还是不走运。页面是空白的，没有。它正在工作。谢谢“未找到资源”时出错，现在我将代码中的url更改为

jsontext.txt

替换

hello/jsontext.txt

。因此，现在它的工作。非常感谢。使用这个，我必须在一个项目上工作。我这样做只是为了了解情况。“你帮了我！”巴默说。有没有其他方法可以调用ajax。我希望这通电话每3秒钟通一次。如何操作？使用

setInterval

定期运行函数。Javascript控制台中有错误吗？当你遇到JS问题时，这应该是你第一个看到的地方。

xmlhttp.onreadystatechange = function(){
    if(xmlhttp.readyState==4&&xmlhttp.status==200){
        var values=JSON.parse(xmlhttp.responseText);
        a=values.name;
        b=values.pwd;
        document.getElementById("demo").innerHTML=a+" "+b;
    }
}