Возврат массива PHP в файл JavaScript с помощью AJAX - PullRequest
0 голосов
/ 18 ноября 2018

Для предисловия к этому вопросу у меня есть базовое понимание PHP и AJAX. Меня попросили разработать простую форму, которая попросила бы пользователя выбрать одного из двух производителей автомобилей, который вернул бы все модели выбранной марки из многомерного массива, созданного в файле data.php. Пока это то, что я смог придумать:

index.php

<body>
<form id="form">
<label for="make">
Make
<select name="make" id="make">
<option value="" selected="selected">None</option>
<option value="Ford">Ford</option>
<option value="BMW">BMW</option>
</select>
</label>
<input name="submit" value="Submit" type="submit" id="submit">
</form>
<h2>Models:</h2>
<div id="results"></div>
</body>

data.php

<?php
$data = array(
array('make' => 'Ford', 'model' => 'Fiesta'),
array(''make' => 'Ford', 'model' => 'Focus'),
array('make' => 'Ford', 'model' => 'Mustang'),
array('make' => 'BMW', 'model' => '320'),
array('make' => 'BMW', 'model' => 'X3'),
array('make' => 'BMW', 'model' => 'X5'),
);
?>

ajax.php

<?php
require_once( 'data.php' );
$myJSON = json_encode($data);
echo $myJSON;
?>

function.js

$(document).ready(function() {
"use strict"
console.log("Document loaded...");

$('#submit').click(function( event ) {
    event.preventDefault();
    console.log("Submit button was clicked");
    run_ajax();
});

var run_ajax = function() {
    var results = $( '#results' );
    var formData = $( '#make' );
    $.ajax({
        type: 'get',
        url: 'ajax.php',
        data: formData,
        dataType: 'json',
        beforeSend: function() {
          console.log("Before Send");
        },
        success: function( response ) {
          console.log("Success");
        },
    });
    var xmlhttp = new XMLHttpRequest();
    var carModel;
    xmlhttp.onreadystatechange = function() {
        myObj = JSON.parse(this.responseText);
        for (x in myObj) {
          console.log("testing");
          carModel += myObj[x].model + "<br>";
        document.getElementById("results").innerHTML = carModel;
      };
    };
};
});

Я могу отобразить сообщение Успешное в консоли, но не могу ничего отобразить в div 'results' в index.php. Кто-нибудь знает, где я иду не так? Я искал связанные темы, но не мог найти что-либо относительно извлечения данных из локального файла. Заранее спасибо за любую помощь!

1 Ответ

0 голосов
/ 18 ноября 2018

Работаю сейчас, спасибо за помощь всем!

function run_ajax(make) {
    var results = $( '#results' );
    var msg = "";
    $.ajax({
        type: 'get',
        url: 'ajax.php',
        data: make,
        dataType: 'json',
        beforeSend: function() {
          console.log("Before Send");
        },
        success: function( response ) {
          console.log("Success!");
          for(var x in response) {
            if(response[x].make == make) {
              msg += response[x].model + "<br>";
            }
          }
          if(msg == "") {
            msg = "No matches found!";
          }
          document.getElementById("results").innerHTML = msg;
        },
    });
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...