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

控制台错误：

（程序）：1未捕获的SecurityError：阻止具有原点“http://fiddle.jshell.net”的帧访问具有原点“http://jsfiddle.net”的帧。协议，域和端口必须匹配。（匿名函数）@ chrome-extension：//geelfhphabnejjhdalkjhgipohgpdnoc/controllers/frame.js：1 jquery.min.js：4主线程上的同步XMLHttpRequest因其对最终用户体验的不利影响而被弃用。如需更多帮助，请查看https://xhr.spec.whatwg.org/。 jquery.min.js：4 XMLHttpRequest无法加载http://bushell.net/football/site/includes/functions.php。对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许来源“http://fiddle.jshell.net”access.send @jquery.min.js：4 （索引）：77未定义（程序）：1 Uncaught SecurityError：阻止具有原点“http://headwayapp.co”的帧访问具有原点“http://jsfiddle.net”的帧。协议，域和端口必须匹配。（匿名函数）@ chrome-extension：//geelfhphabnejjhdalkjhgipohgpdnoc/controllers/frame.js：1 http://rum-collector.pingdom.net/img/beacon.gif?path=http%3A%2F%2Fjsfiddle。...＆amp; resE = 1110＆amp; dL = 1115＆amp; dI = 3903＆amp; dCLES = 3912＆amp; dCLEE = 4361＆amp; dC = 6421＆amp; lES = 6421＆amp; lEE = 6436无法加载资源：服务器响应状态522（原点连接超时）

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

Answer 1

您必须设置标题

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

在您使用Ajax请求的functions.php中。

有关详细信息，请参阅此处：

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

Answer 2

检查我已经更新了功能，因为你的ajax没有工作，所以我在上面添加了虚拟数据。

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

jQuery加载json数据

2 个答案: