如何使用AJAX将输入输入到javascript变量，并在特定的时间间隔内更新javascript中的函数

How to take input to javascript variables using AJAX and update the function in javascript in specific intervals?

本文关键字：javascript 输入 时间 函数 更新 AJAX 何使用 变量      更新时间：2023-09-26

这里我想通过获取值每三秒更新一次init()函数。我从另一个应用程序发送这些参数。我必须使用AJAX来更新位置点。那么现在该怎么做呢?如何从应用程序获取值并在给定的时间间隔内更新位置?

<!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=(I pasted my java script embed API KEY here)&callback=initMap"
    async defer></script>
    <script>
    var marker;
    var u_lat,u_lng;
    function initMap() {
       var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: u_lat, lng: u_lng},
        zoom: 8
       });
       marker = new google.maps.Marker({
           map: map,
           draggable: true,
           animation: google.maps.Animation.DROP,
           title:'User',
           position: {lat: u_lat, lng: u_lng}
       });
       marker.addListener('click', toggleBounce);
    }
    function toggleBounce() {
      if (marker.getAnimation() !== null) {
        marker.setAnimation(null);
      } else {
        marker.setAnimation(google.maps.Animation.BOUNCE);
      }
    }
    </script>
</body>
</html>

编辑我可以这样写脚本吗? 

<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;
    }
   }
   http.open("GET",url,true);
   http.send();
   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}
   });
}
</script>

可以使用setTimeout和clearTimeout函数

timer = setTimeout(function(){
    // Do the ajax call
}, 3000);

使用这个函数，您可以为ajax调用设置超时，并执行所有需要的操作。

当你完成或当一个错误发生或当你需要重置定时器或其他…您可以使用clearTimeout(timer)来移除定时器。

* EDIT *

这是你需要的工作流程:

<<p> Init函数/strong>

init函数创建一个定时器，该定时器对控制器(参见 controller )进行ajax调用，返回一个可以处理的JSON格式。

的例子:

$.ajax({
    url: 'my/url/to/action.php',
    type: 'POST', // Use always POST for security purposes
    data: {
        parameter1: value1,
        parameter2: value2,  // These are the parameters passed to the controller
        parameter3: value3,
    },
    dataType: 'json',
    complete: function (jqXHR, textStatus) {
        // something to do on ajax request completed
    },
    success: function (response) {
        // Refresh the marker with the values returned on the response
    },
    error: function (jqXhr, textStatus, errorThrown) {
        // something to do if the controller returns error
    }
});
控制器

这是后端部分，在这里你需要一个web服务，以JSON格式返回你需要的值。

你可以很容易地在谷歌上找到许多教程，例如如何使ajax调用PHP控制器…我希望这就是你要找的

相关文章：