jQuery jsonデータをロード中

Question

jQueryを使用してjsonテーブルからデータをロードしようとしました。

何らかの理由で動作していませんが、私はあらゆる面をカバーしていたと思いますか？私は文法上の誤りだと思っていたかもしれません。

私が午前場所です：

HTML：

<table id="fixtures"> 
    <thead> 
    <tr> 
     <th>Home</th> 
     <th>Away</th> 
    </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 

のjavascript：

var jsonDataUrl = 'http://bushell.net/football/site/includes/functions.php'; 

$(function() { 
    $.ajax({ 
    type: 'GET', 
    url: jsonDataUrl, 
    async: false, 
    jsonpCallback: 'JSON_CALLBACK', 
    contentType: "application/json", 
    dataType: 'json', 
    success: function(data) { 
     addRows($('#fixtures'), data, ['data.homeTeamName','data.awayTeamName']); 
    }, 
    error: function(e) { 
     console.log(e.message); 
    } 
    }); 
}); 

function addRows(table, data, fields) { 
    var tbody = table.find('tbody'); 
    $.each(data, function(i, item) { 
    tbody.append(addRow(item, fields)); 
    }); 
    return tbody; 
} 

function addRow(item, fields) { 
    var row = $('<tr>'); 
    $.each(fields, function(i, field) { 
    row.append($('<td>').html(item[field])); 
    }); 
    return row; 
} 

コンソールエラー：

(program):1 Uncaught SecurityError: Blocked a frame with origin " http://fiddle.jshell.net " from accessing a frame with origin " http://jsfiddle.net ". Protocols, domains, and ports must match.(anonymous function) @ chrome-extension://geelfhphabnejjhdalkjhgipohgpdnoc/controllers/frame.js:1 jquery.min.js:4 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/ . jquery.min.js:4 XMLHttpRequest cannot load http://bushell.net/football/site/includes/functions.php . Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://fiddle.jshell.net ' is therefore not allowed access.send @ jquery.min.js:4 (index):77 undefined (program):1 Uncaught SecurityError: Blocked a frame with origin " http://headwayapp.co " from accessing a frame with origin " http://jsfiddle.net ". Protocols, domains, and ports must match.(anonymous function) @ chrome-extension://geelfhphabnejjhdalkjhgipohgpdnoc/controllers/frame.js:1 http://rum-collector.pingdom.net/img/beacon.gif?path=http%3A%2F%2Fjsfiddle .…&resE=1110&dL=1115&dI=3903&dCLES=3912&dCLEE=4361&dC=6421&lES=6421&lEE=6436 Failed to load resource: the server responded with a status of 522 (Origin Connection Time-out)

http://jsfiddle.net/XtzjZ/671/

Answer 1

チェック。

http://jsfiddle.net/c2j1bc2h/

$(function() { 
data = [{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},{'homeTeamName':'sdfds','awayTeamName':'dasdsa'},] 
addRows1($('#fixtures'), data, ['homeTeamName','awayTeamName']); 

function addRows1(table, data, fields) { 
    var tbody = table.find('tbody'); 

    $.each(data, function(i, item) { 
    console.log(item); 
    tbody.append(addRow1(item, fields)); 
    }); 
} 

function addRow1(item, fields) { 
    var row = '<tr>'; 
    $.each(fields, function(i, field) { 

    row +='<td>'+item[field]+'</td>'; 
    }); 
    row += '</tr>'; 
    return row; 
} 
}); 

Answer 2

あなたはアヤックスと要求しているところだあなたのfunctions.phpで

header("Access-Control-Allow-Origin: *"); 

ヘッダーを設定している必要があります。

は、より多くの情報のためにこれを参照してください：あなたのアヤックスは、私が上記ダミーデータを追加しているので、動作しないように私は、fucntionsを更新した

"No 'Access-Control-Allow-Origin' header is present on the requested resource"