Использование javascript ajax для получения данных и отображения их в html

Question

Вот мой код: файл js с именем query. js, который получает массив объектов с данными базы данных:

function JSQuery(query) {
  var xhttp;
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var obj = JSON.parse(this.responseText);
      return obj;
    }
  };
  xhttp.open("GET", "php/query.php?q=" + query, true);
  xhttp.send();
}

, и он находится в файле php в html body:

<script src="js/query.js">
  </script>
  <script>
    function getQueryResults() {
      var obj = JSQuery('select * from User;');
      for (var i = 0; i < obj.length; i++) {
        document.getElementById("txt").innerHTML += obj[i].user_email + ' ' + obj[i].user_email + ' ' + obj[i].user_first + ' ' + obj[i].user_last + '<br>';
      }
    }
  </script>

  <center><button type="button" onclick="getQueryResults()">TEST</button></center>
  <center>
    <p id="txt"></p>
  </center>

Когда я тестировал функцию JSQuery непосредственно в теле html, я смог успешно обновить paragaph 'txt' с данными, но теперь я переместил его в другой файл, включающий его в файл html, вызывающий его из функции onclick, возвращающий объект и пытающийся отобразить, ничего не отображает. Что я делаю не так?

Answer 1

Если вы хотите go на другой URL, вы можете использовать AJAX и в ajax вы также можете получать данные в форме json.

$("button").click(function(){
  $.ajax({url: "demo_test.txt", success: function(result){
    $("#div1").html(result);
  }});
});