从 MySQL 加载数据并使用 jQuery Mobile、PHP 填充下拉选择答案

【问题标题】：Loading data from MySQL and populating dropdown select with jQuery Mobile, PHP从 MySQL 加载数据并使用 jQuery Mobile、PHP 填充下拉选择
【发布时间】：2013-10-17 05:53:51
【问题描述】：

我正在开发一个从 MySQL 数据库获取一些信息的 PhoneGap 应用程序。当我尝试打开一个包含两个需要在页面加载时填充的选择输入的 HTML 页面时，我很挣扎，每个输入都包含来自两个不同表的数据。我不知道为什么，但他们没有被填充。拜托，非常欢迎任何帮助。

HTML 代码

<div data-role="content">
  <p></p>
  <form id="cname" align="left" action="post" data-ajax="false" >
    <label for "id">Employee's Name:</label><br/>
    <select name="id" id="id"></select><br/>
    <label for "job_id">Job's Name:</label><br/>
    <select name="job_id" id="job_id"></select><br/>
    <input type="hidden" name="latitued" id="latitued" value="">
    <input type="hidden" name="longitude" id="longitude" value="" >
    <input type="hidden" name="goo_map_api" id="goo_map_api" value="">
    <input type="submit" value="Clock-In" id="enviar_in" data-inline="true">
  </form>
</div

Jquery 脚本两个 SELECTS

<script type="text/javascript">
$(document).ready(function(e){
  var items="";
  $.getJSON("get_emp.php",function(data){
    $.each(data,function(index,item) 
    {
      items+="<option value='"+item.id+"'>"+item.fullName+"</option>";
    });
    $("#id").html(items); 
  });
});
</script>


<script type="text/javascript">
$(document).ready(function(e){
  var items="";
  $.getJSON("get_job.php",function(data){
    $.each(data,function(index,item) 
    {
      items+="<option value='"+item.id+"'>"+item.job_name+"</option>";
    });
    $("#job_id").html(items); 
  });
});
</script>

PHP 文件获取_emp.php

<?php
$mysqli = new mysqli($mysql_hostname,$mysql_user, $mysql_password, $mysql_database);
$q = "select id, fullName from employees";
$sql = $mysqli->query($q);
$data = array();
while($row = mysqli_fetch_array($sql, true)){
    $data[] = $row; 
};
echo json_encode($data);
?>

PHP 文件 get_job.php

<?php
$mysqli = new mysqli($mysql_hostname,$mysql_user, $mysql_password, $mysql_database);
$q = "select id, job_name from jobs";
$sql = $mysqli->query($q);
$data = array();
while($row = mysqli_fetch_array($sql, true)){
    $data[] = $row; 
};
echo json_encode($data);
?>

再一次，感谢您花时间查看这段代码以帮助我。谢谢。

【问题讨论】：

您的代码看起来不错。您是否在控制台中看到错误？
谢谢@wumm。不，我没有。我做了apk并在手机上进行了测试。我可以进行登录测试，但是当我达到这一点时，页面无法从数据库加载信息并填充我的选择输入。
Jquery mobile 没有按预期触发文档准备就绪，在堆栈上搜索它。另外，你不能只使用 PHP 来填充它们吗？
我希望不要使用 PHP 来填充这些输入，但是，如果不使用 PHP 脚本@scrowler，我如何访问 MySQL 并检索数据？
只需将 PHP 代码放入 HTML 代码中，而不是填充数组，而是将结果输出为 <option>s

标签： php mysql jquery-mobile

【解决方案1】：

代码对我来说看起来不错。你设置了正确的标题吗？

header('Content-Type: application/json');
echo json_encode($data);

【讨论】：

谢谢@Ritesh A 这些是我正在使用的标头 header("access-control-allow-origin: *"); header("访问控制允许方法：GET、POST、OPTIONS"); header("访问控制允许凭据：true"); header("access-control-allow-headers: Content-Type, *"); header("Content-type: application/json");

【解决方案2】：

乍一看，代码看起来还不错。你在控制台里有什么？所有的json数据都在那里吗？否则试试

$.each(data,function(index,item) 
{
    $('<option>').val(item.id).html(item.job_name).appendTo("#job_id");
});

更新：可以试试添加吗

error_log(print_r($data,1));

之前

回显 json_encode($data);

在 get_emp.php 中并检查 php_error.log 以查看加载页面时是否在服务器端填充数据

【讨论】：

感谢@aaryy，但仍然无法从数据库中获取数据。
我的应用程序正在 Dreamweaver 中开发，插入您建议的行后，我可以看到使用 Dreamweaver 的 LIVE 选项加载的 SELECTS。当我使用 Adobe PhoneGap 制作 apk 时，在发布它之前，我使用 QR 码将应用程序安装到手机中只是为了测试它。我可以完美登录，是什么让我相信与数据库的交互工作正常，但是当我访问应该加载数据的页面时，什么都没有填充。
你看到那个error_log语句生成的错误日志了吗？它是否有一个包含数据库中数据的数组，如你所料？
没有报错！就像我说的。当我模拟应用程序时会加载选择，但是一旦安装在手机中，就不会加载任何内容。我做了一个测试。在加载 SELECT 之后，我在我的 jquery 结构中放置了一个警报消息。它在模拟时弹出，但在手机中时，没有任何反应。脚本好像没读完。
不一定是错误，应该是包含数组形式为array{ array {0 =>'blabla', 'id' => 'blabla', 1 => 'blabla', 'fullName' => 'blabla'}，数组 {0 =>'blabla', 'id' => 'blabla', 1 => 'blabla', 'fullName' => 'blabla'} }。我相信你说的select查询被执行了，只是想确保查询结果没问题

【解决方案3】：

我认为这与 DOM 准备好和执行 Jquery 脚本之间的时间有关。

在这种情况下，您的脚本会在 DOM 准备好之前执行。如果您引用的某些对象在 DOM 中尚未准备好，因此 JQuery 无法找到该对象，那么 JQuery 就会停止执行。

【讨论】：