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

Get JSON data with AJAX and then modify raphael.js script

本文关键字：修改 raphael js 脚本 然后 AJAX 获取 JSON 数据 使用      更新时间：2023-09-26

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

在我的拉斐尔js文件中，我现在必须：

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

我目前被困在第一步。

这是我简化的JSON文件(我们称之为countries.json(：

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

这是简化的拉斐尔.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/有什么不同(请参阅如何使用jquery/javascript解析json数据？

那只是第 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);

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

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

完成

类型： 函数( jqXHR jqXHR， 字符串文本状态 (

(...该函数传递两个参数：jqXHR(在jQuery 1.4.x中，XMLHTTPRequest(对象和一个对请求状态进行分类的字符串("成功"，"未修改"，"无内容"，"错误"，"超时"，"中止"或"解析器错误"(。

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

$.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);
  }
});
相关文章：