使用 AJAX 获取 JSON 数据，然后修改 raphael.js 脚本

Question

这就是我想要实现的目标： 我想使用 raphael.js 创建一个交互式地图。 使用 Php，我从 MySql DB 获取数据并转换为 JSON 文件。 到目前为止一切顺利。

在我的 raphael js 文件中，我现在必须：

1. 获取这些数据
2. 使用它们来修改我的 raphael 文件。

我目前卡在这第一步。

这是我的简化 JSON 文件（我们称之为 country.json）：

[
 {
   "id": "1",
   "type": "Country",
   "title": "France",
   "published": "1",
   "description": "Republic"
 },
 {
   "id": "2",
   "type": "Country",
   "title": "Belgium",
   "published": "0",
   "description": "Monarchy"
 }
]

这里是简化的 raphael.js

var rsr = Raphael('map', '548', '852');
var countries = [];

var france = rsr.path("M ...  z");
france.data({'published': '1', 'type': '', 'title': '', 'description':''});

var belgium = rsr.path("M ...  z");
belgium.data({'published': '0', 'type': '', 'title': '', 'description':''});

countries.push(france,belgium);

在 raphael js 结束时，我发出 Ajax 请求（使用 jquery）来获取我的 JSON 数据：

 $.ajax({
   type : 'GET',
   url : 'system/modules/countries.json',
   data: {get_param: 'value'},
   dataType : 'json',

   success : function(data, statut){
      console.log(statut);


   },

   error : function(data, statut,erreur){
      console.log(statut);

   },

    complete: function (data) {
       var json = $.parseJSON(data);
       $(json).each(function(i,val){
            $.each(val,function(k,v){
               console.log(k+" : "+ v);
            });
        });

    }

});

麻烦来了： 我通过成功功能获得“成功”状态。 但是我在完成脚本时遇到了错误：

Uncaught SyntaxError: Unexpected token o

我错过了什么？无法弄清楚与http://jsfiddle.net/fyxZt/4/ 有什么不同（参见how to parse json data with jquery / javascript?）

这只是第 1 部分 :-) 假设有人可以帮助我解决这个问题，我仍然不知道如何编写 js 循环来设置 raphael vars 属性：

var rsr = Raphael('map', '548', '852');
var countries = [];

var france = rsr.path("M ...  z");
france.data({'published': '1', 'type': 'Country', 'title': 'France', 'description':'Country'});

var belgium = rsr.path("M ...  z");
belgium.data({'published': '0', 'type': 'Country', 'title': 'Belgium', 'description':'Monarchy'});

communes.push(france,belgium);

感谢您的帮助，请原谅我不完美的英语！ 文尼

Answer 1

没有data 参数传递给complete 回调， 根据jQuery API：

完成

类型：函数(jqXHR jqXHR, String textStatus)

(...)该函数被传递了两个参数：jqXHR（在 jQuery 1.4.x 中，XMLHTTPRequest）对象和一个对请求状态进行分类的字符串（“success”、“notmodified”、“nocontent”、“ error”、“timeout”、“abort”或“parsererror”）。

所以你只需要使用成功回调：

$.ajax({
  type: 'GET',
  url: 'system/modules/countries.json',
  data: {
    get_param: 'value'
  },
  dataType: 'json',
  success: function (data, statut) {
    
    var json = data;
    $(json)
    .each(function (i, val) {
      $.each(val, function (k, v) {
        console.log(k + " : " + v);
      });
    });
  },
  error: function (data, statut, erreur) {
    console.log(statut);

  }
});

关于您的第二个问题，您不能直接与 js 中的变量名（访问动态变量）交互，因此您需要创建一个对象，其中值由您的 json 值之一索引。但是，处理此问题的最简单方法可能是将路径添加到 json...

var rsr = Raphael('map', '548', '852');
var countries = [];

//here I used the "id" property from the json
var paths={
  "1":rsr.path("M ...  z"),
  "2":rsr.path("M ... z")
};

countries.push(france,belgium);

$.ajax({
  type: 'GET',
  url: 'system/modules/countries.json',
  data: {
    get_param: 'value'
  },
  dataType: 'json',
  success: function (data, statut) {
    datas.forEach(function (country) {
      paths[country.id].data(country);
    });
  },
  error: function (data, statut, erreur) {
    console.log(statut);

  }
});