2017-01-14 1 views
0

Я пытаюсь преобразовать фрагменты кода php на свой веб-сайт, которые обращаются к базе данных sql в ajax, поэтому мне не нужно обновлять на странице, и у меня возникают проблемы с работой.Звонок функции jQuery AJAX ничего не делает и неожиданного вызова функции при загрузке страницы

Я написал функцию ajax jquery (getLatestData()), которая устанавливает значения элементов html в те, которые были возвращены из запроса на php-страницу. Эта функция автономна (т. Е. Не инициируется действием над элементом, она просто является функцией сама по себе) и работает совершенно нормально, извлекает данные из базы данных и правильно помещает их в поля.

Однако я не могу вызвать функцию вручную. Это должно произойти каждую минуту (с использованием javascript's setInterval() и проверки, если текущая секунда равна 2), поэтому новые данные загружаются каждую минуту (вторая часть setInterval() в моем коде). Это также прекрасно работает, так как я пытался предупредить его. Но, если я заменю это заявление вызовом моей функции ajax, ничего не произойдет. Почему это? Как вы называете функцию jQuery ajax?

Кроме того, моя функция ajax продолжает получать вызовы всякий раз, когда загружается страница (это единственная причина, по которой я знаю, что функция работает), несмотря на то, что нет абсолютно никаких других вызовов к ней, кроме тех, которые я пытаюсь получить (и это все равно, даже когда этот вызов удален). Является ли это функцией самого ajax или что-то не так с моим кодом? Как я могу остановить это?

Код:

<html> 
    <head> 
    <title>Remote Latest Data Warwick</title> 
    <link rel="icon" type="image/jpeg" href="favicon.jpg"> 

    <link rel="stylesheet" type="text/css" href="styles/defaultstyles.css"> 
    <link rel="stylesheet" type="text/css" href="styles/globalstyles.css"> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> 
    <script src="scripts/globalscripts.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function() { 

     $(function getLatestData() { 
     alert("success1"); 

     $.ajax({ 
      type: "get", 
      url: "retrieve/getlatestreport.php", 
      dataType: "json", 

      success: function(response) { 
      alert(response[1]); 

      document.getElementById("fAmbientTemperature_DryThermometer").innerHTML = response[0]; 
      document.getElementById("fAmbientTemperature_ExposedThermometer").innerHTML = response[1]; 
      document.getElementById("fSoilTemperature_10CentimetresDown").innerHTML = response[2]; 
      } 
     }); 

     }); 
    }); 
    </script> 

    <script type="text/javascript"> 
    function onLoad() { 
     updateCurrentSystemTime(); 

     // Update number of seconds to data refresh 
     setInterval(function() { 
     seconds = 60 - new Date().getSeconds() + 3; 

     if (seconds > 59) { 
      seconds = seconds - 60; 
     } 

     document.getElementById(
      "timeToUpdate").innerHTML = seconds; 
     }, 100); 

     // Refresh page on third second of minute 
     setInterval(function() { 
     current = new Date(); 

     if (current.getSeconds() == "2") { 
      //location.reload(); 
      //alert("t3"); 
      getLatestData(); 
     } 
     }, 1000); 
    } 
    </script> 
    </head> 
... 

ответ

0

Ваш первый фрагмент кода работает на странице загрузки, и вызывает запрос AJAX. У вас есть $(document).ready(function() { ... });, что означает: дождитесь загрузки HTML-кода, затем вызовите функцию. Затем у вас есть $(function getLatestData() { ... });, что означает: дождитесь загрузки HTML-кода, затем вызовите getLatestData. В общем, это означает, что дождитесь загрузки, затем проверьте, чтобы он был загружен, а затем вызовите getLatestData. Вот почему он запрашивает AJAX при загрузке страницы.

(Излишне говорить, что вам не нужно дважды ждать часть HTML. На самом деле, я не думаю, что это необходимо для встроенного скрипта - это только потому, что скрипт находится в собственном файл, например globalscripts.js, когда есть опасность, что он может загрузить и попытаться запустить сценарий до загрузки страницы.)

Что касается того, почему вызов AJAX не возникает, когда вы пытаетесь вызвать его, t сказал, где/вы устанавливаете обработчик. Например, вы могли бы иметь <button id="reload-button">Reload</button> и $('#reload-button').click(onLoad);.

Если вы уже делаете что-то подобное или добавляете эти две строки, вы должны увидеть сообщение об ошибке в консоли, в котором говорится, что он не может позвонить getLatestData, потому что он не определен. Если вы не знаете, что я подразумеваю под «областью действия» переменной, посмотрите ее. getLatestData объявлен и определен в области анонимной функции в вызове $(document).ready. Поэтому он может использоваться только внутри этой функции. Я уже указывал, что вы можете избавиться от части document.ready. Если вы это сделаете, то getLatestData будет объявлен и определен в глобальной области действия, и вызов AJAX должен работать.

Таким образом, вы должны заменить свой первый встроенный скрипт на function getLatestData() { ... }.

+0

Хорошо, это имеет смысл, но я никак не могу определить функцию ajax отдельно, без обработчика или триггера.Это то, что я пытался сделать с определением 'getLatestData()', поэтому я мог бы называть его вручную с некоторой точки кода, вместо того, чтобы вызвать его при взаимодействии с элементами страницы. Есть ли способ, которым я могу это сделать? – HenryHunt

+0

Я добавил еще одну строку к моему ответу. Надеюсь, что это прояснит ситуацию. –

Смежные вопросы