Как получить данные json_encode php url, используя jquery ajax?

Question

автозаполнение-api.php

<?php
    session_start();
    error_reporting(0);
    include("includes/config.php");

    $data = array();
    $query = "SELECT product_name FROM inventory group by product_name;";
    $query .= "SELECT name FROM brands;";
    $query .= "SELECT name FROM categories;";

    mysqli_multi_query($con,$query);
    $result = mysqli_store_result($con);

    while($row = mysqli_fetch_assoc($result)) 
    {
        $data[] = array(
                        'products' => $row['product_name']
                    );
    }

    mysqli_free_result($result);
    mysqli_next_result($con);

    $result = mysqli_store_result($con);

    while ($row = mysqli_fetch_assoc($result)) {
        $data[] = array(
                        'products' => $row['name']
                    );
    } 

    mysqli_free_result($result);
    mysqli_next_result($con);

    $result = mysqli_store_result($con);

    while ($row = mysqli_fetch_assoc($result)) {
        $data[] = array(
                        'products' => $row['name']
                    );
    } 

    mysqli_free_result($result);
    mysqli_close($con);

    $results = json_encode($data);
    print($results);
?>

autocomplete.js

function autocomplete(inp, arr) {
  var currentFocus;
  inp.addEventListener("input", function(e) {
      var a, b, i, val = this.value;
      closeAllLists();
      if (!val) { return false;}
      currentFocus = -1;
      a = document.createElement("DIV");
      a.setAttribute("id", this.id + "autocomplete-list");
      a.setAttribute("class", "autocomplete-items");
      this.parentNode.appendChild(a);
      for (i = 0; i < arr.length; i++) {
        if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
          b = document.createElement("DIV");
          b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
          b.innerHTML += arr[i].substr(val.length);
          b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
          b.addEventListener("click", function(e) {
              inp.value = this.getElementsByTagName("input")[0].value;
              closeAllLists();
          });
          a.appendChild(b);
        }
      }
  });
  inp.addEventListener("keydown", function(e) {
      var x = document.getElementById(this.id + "autocomplete-list");
      if (x) x = x.getElementsByTagName("div");
      if (e.keyCode == 40) {
        currentFocus++;
        addActive(x);
      } else if (e.keyCode == 38) {
        currentFocus--;
        addActive(x);
      } else if (e.keyCode == 13) {
        e.preventDefault();
        if (currentFocus > -1) {
          if (x) x[currentFocus].click();
        }
      }
  });
  function addActive(x) {
    if (!x) return false;
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    x[currentFocus].classList.add("autocomplete-active");
  }
  function removeActive(x) {
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }
  function closeAllLists(elmnt) {
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    }
  }
  document.addEventListener("click", function (e) {
      closeAllLists(e.target);
      });
}
$.ajax({
    type:"GET",
    url:"http://localhost/leafteaculture/autocomplete-api.php",
    datatype:"JSON",
    success:function(json){
        alert(json);
        /*$.each(json, function(key, item) {
            var countries =  item.products;
            alert(countries);
        });*/
    }
});

Index.php

<input type="text" name="pro_duct" id="pro_duct" />

<script src="<?php echo $base_url; ?>assets/js/autocomplete.js"></script>
<script>
    autocomplete(document.getElementById("pro_duct"), countries);
</script>

Возможно, может быть дубликат вопроса. Я создал окно с предложением автозаполнения, где у меня есть autocomplete-api.php, где я использовал функцию json_encode, которая работает нормально, но проблема с файлом autocomplete.js. Я не могу получить данные из файла autocomplete-api.php. Я хочу получить данные из autocompelete-api.php url и поместить их в переменную jquery. Итак, как я могу это сделать? Пожалуйста, помогите мне.

Спасибо

Answer 1

Я думаю, что первое, что нужно исправить, это ваш php-файл - давайте его запустим. Вы можете поддерживать ту же логику / результат запроса с гораздо меньшими хлопотами, используя UNION ключевые слова для формирования одного / более эффективного запроса.

session_start();
header('Content-type: application/json');
include("includes/config.php");

if (!$result = $con->query("(SELECT product_name AS products FROM inventory GROUP BY product_name) UNION (SELECT name FROM brands) UNION (SELECT name FROM categories)")) {
    echo [];  // check $con->error; because your query failed
} else {
    echo json_encode($result->fetch_all(MYSQLI_ASSOC));
}

Да, ЭТО действительно можно уменьшить! Вот доказательство того, что запрос работает .

Исходя из тех же данных, сгенерированная строка json:

[{"products":"One"},{"products":"Three"},{"products":"Two"},{"products":"Four"},{"products":"Five"},{"products":"Six"},{"products":"Seven"},{"products":"Eight"}]

Затем строка json получена вашим javascript, вызовите var apiArray = = JSON.parse(json);, чтобы вы могли работать с многомерным массивом, содержащим один столбец данных.

---

... p.s. Если вас беспокоит дублирование названий продуктов, вы можете отсеять дубликаты в запросе:

SELECT DISTINCT product FROM (
    (SELECT product_name AS product FROM inventory GROUP BY product_name)
    UNION
    (SELECT name FROM brands)
    UNION
    (SELECT name FROM categories)
) Unionized

Answer 2

Возможная проблема может заключаться в том, что, поскольку вы использовали json_encode, который возвращает string, а в запросе AJAX вы указали dataType как JSON, AJAX не может найти требуемый dataType в ответ. Вы можете просто удалить свойство dataType из запроса AJAX. После того, как данные получены, вам нужно использовать JSON.parse для преобразования строки в формат JSON.

См. AJAX документация и json_encode для получения дополнительной информации.

Надеюсь, это поможет.