Question

我在名为“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>

现在这是jsontext.txt

{"name":"Prasad","pwd":"123"}

我将文件夹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>

Answer 1

AJAX是异步的。在AJAX响应发生之前，您已将a和b放入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;
    }
}

JSON数据不是来自txt文件

1 个答案: