如何根据服务器上的内容更新客户端javascript?

时间:2017-04-24 16:34:15

标签: javascript php mysql

我研究过这个问题,但是当你不知道最好的方法甚至是如何开始时,很难找到一些东西。我显然没有任何代码,所以我将描述我的问题,希望有人可以指出我正确的解决方法:

好吧,假设我有一个名为“myfunction1”的javascript函数的页面,它使用js中的setinterval每隔x秒触发一次。我想要它做的是,(或许使用AJAX?)当调用“myfunction1”时,调用一个PHP脚本来检查数据库中的某些内容。如果某个条件为TRUE,我想在客户端的javascript中调用一个特定的函数。如果为FALSE,我希望它调用不同的函数。

我的直觉让我觉得这样做的方法是让ajax调用php检查脚本,然后基于if或true来回显正确的javascript代码。但是我该怎么做呢?我知道如何使用ajax来更改标签的.innerhtml,但是你可以用这种方式在脚本标签内重写吗?我的头在旋转,希望我有所了解,你们中的一个可以指出我正确的方式

1 个答案:

答案 0 :(得分:1)

AJAX would probably be the simplest solution and can be used to evaluate returning script or you can manually validate/display the response from the XmlHttpRequest that the server processed.

For example when using jQuery.ajax You can change the dataType option to script. Otherwise you can manually program the validation in the success callback, like below, using JSON.

javascript (jQuery)

jQuery(function($) {
   'use strict';
   var element = $('#myElement');
   var ajax = null;
   var ajaxTimeout = 0;

   function myFunction1() {
       if (null !== ajax) {
          //prevent overlapping ajax requests
          ajax.abort();
          ajax = null;
       }
       ajax = $.ajax({
         url: '/response.php',
         method: 'post',
         dataType: 'json',
         success: function(data) {
            //parse the server side response
            if (data.result === true) {
               trueFunction(data);
            } else {
               falseFunction(data);
            }
            ajax = null;
         }
      });
   }

   //custom functions for true or false and setInterval.
   function trueFunction(data) {
      element.html('Success: ' + data.value);
   }

   function falseFunction(data) {
      element.html('Failed: ' + data.value);
   }

   ajaxTimeout = window.setInterval(myFunction1, 1000);
});

response.php

<?php 

header('Content-Type: application/json');
$date = new \DateTime;
echo json_encode((object) [
    'value' => 'Hello World ' . $date->format('Y-m-d h:i:s a'), 
    'result' => true
]);
exit;