时间戳

首页 > 解决方案 > 使用 AJAX 将 PHP 数组返回到 JavaScript 文件

javascript - 使用 AJAX 将 PHP 数组返回到 JavaScript 文件

问题描述

作为这个问题的序言，我对 PHP 和 AJAX 有一个基本的了解。我被要求设计一个简单的表单，要求用户从两个汽车制造商中选择一个，这将从 data.php 文件中创建的多维数组中返回所选品牌的所有模型。到目前为止，这是我能够想出的：

索引.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>

数据.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;
?>

函数.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;
      };
    };
};
});

我能够让成功消息显示在控制台中，但我无法在 index.php 的“结果”div 中显示任何内容。有谁知道我哪里出错了？我搜索了相关主题，但找不到任何有关从本地文件中提取数据的信息。提前感谢您的任何帮助！

标签： javascriptphpjqueryjsonajax

解决方案

现在可以了，谢谢大家的帮助！

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;
        },
    });
};

推荐阅读