JSFiddle：无法从数据库加载 Ajax 数据

Question

我正在尝试加载数据库信息，但它似乎在 JSFiddle 中不起作用。

HTML：

<table class="table" border="1" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
        <th>Dropdown</th><th>Description From Account</th><th>Other</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td width="20%" id="accountNumber" contenteditable="true"><select data-placeholder="Choose Account . . ." class="chosen-select-newRow" style="width:350px;" tabindex="4"><option value=""></option></select></td><td id="accountDesc" contenteditable="true"></td><td id="branch" contenteditable></td>
        </tr>
        <tr>
            <td width="20%" id="accountNumber" contenteditable="true"><select data-placeholder="Choose Account . . ." class="chosen-select-newRow" style="width:350px;" tabindex="4"><option value=""></option></select></td><td id="accountDesc" contenteditable="true"></td><td id="branch" contenteditable></td>
        </tr>
    </tbody>
</table>

阿贾克斯：

function populate(){
$(function () 
  {
    //-----------------------------------------------------------------------
    // 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/
    //-----------------------------------------------------------------------
    $.ajax({                                      
      url: 'journal-populate.php',                  //the script to call to get data          
      data: '',                        //you can insert url argumnets here to pass to api.php
                                       //for example "id=5&parent=6"
      dataType: 'json',                //data format      
      success: function(rows){          
                    for (var i in rows)
                        {
                            var row = rows[i]; 

                            //var account = row[1];         //get id
                            //var description = row[2];     //get account description

                            $('.chosen-select-newRow').append($('<option></option>').val('?acc=' + row[1] + '&desc=' + row[2]).html(row[1] + ' - ' + row[2]));

                            //alert(id + ' ' + account + ' ' + description + ' ' + level1 + ' ' + level2 + ' ' + level3 + ' ' + level4 ); /*'<span onclick="return false;" href="?account='+ row[1] +'&desc='+ row[2] +'">'+*/ /*+'</span>'*/

                        } 
                }
        });
  }); 

}

PHP：

<?php 
  include('dbconn.php');
  //--------------------------------------------------------------------------
  // Example php script for fetching data from mysql database
  //--------------------------------------------------------------------------
  $databaseName = "mochamhy_test";
  $tableName = "accountMaster";

  //--------------------------------------------------------------------------
  // 1) Connect to mysql database
  //--------------------------------------------------------------------------

  $con = mysql_connect($gaSql['server'],$gaSql['user'],$gaSql['password']);
  $dbs = mysql_select_db($databaseName, $con);
  //--------------------------------------------------------------------------
  // 2) Query database for data
  //--------------------------------------------------------------------------

  $result = mysql_query("SELECT * FROM $tableName ORDER BY `accountNumber` ASC");          //query
  //$array = mysql_fetch_array($result);                          //fetch result 
  $data = array();
    while ( $row = mysql_fetch_row($result) )
        {
             $data[] = $row;
        }
  //--------------------------------------------------------------------------
  // 3) echo result as json 
  //--------------------------------------------------------------------------
  echo json_encode($data);

?>

它在我的本地主机上运行，​​但我似乎无法让它在 Fiddle 上运行。我什至可以在这里看到 JSON 数据http://www.mochamedia.co.za/clients/testing/js/journal-populate.php

不知道有没有可能？

Heres the FIDDLE.

任何帮助或建议将不胜感激！

Answer 1

因为您的 jsfiddle 无法找到您的 php 文件 以及包含您调用的函数 populate() 的 ajax 文件 window.onload。

因此，您必须包含该文件并提供适当的路径。 jsfiddle 提供了在 External Resources 标题下包含外部文件的选项，因此请尝试包含所有需要的 php 文件，您的小提琴将完美运行。

Answer 2

您必须在回显 json 数据之前添加以下内容。在浏览器中呈现为 json 文件，然后允许外部请求。

header('Content-Type: application/json');
header("Access-Control-Allow-Origin: *");

然后使用

<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(document).ready(function(e) {
        $.getJSON('http://www.mochamedia.co.za/clients/testing/js/journal-populate.php',function(data){
            var items = [];
            $.each(JSON.parse(data), function(key, val) {
                items.push('<option id="' + key + '" value="'+val+'">' + val + '</option>');
            }); 
            $('#accountNumber').append(items.join("\n"));
        });
    });
</script>