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>

的Ajax：

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

?>

它正在我的本地主机上工作，但我似乎无法让它在小提琴上工作。我甚至可以在http://www.mochamedia.co.za/clients/testing/js/journal-populate.php

看到JSON数据

我不知道是否可能？

Heres the FIDDLE.

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

Answer 1

因为您的jsfiddle无法找到您的 php文件以及 ajax文件，其中包含您从中调用的函数 populate（）的的window.onload 即可。

因此，您必须包含该文件并提供适当的路径。 jsfiddle提供了在外部资源的头部包含外部文件的选项，因此请尽量包含所有需要的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>

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

2 个答案: