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

问题描述

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

This is what I want to achieve:I want to create an interactive map using raphael.js.Using Php, I get datas from MySql DB and converted into a JSON file.So far so good.

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

Inside my raphael js file, I must now:

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

我目前停留在第一步.

这是我的简化JSON文件(我们称其为country.json):

Here's my simplified JSON file (let's call it countries.json) :

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

这是简化的raphael.js

Here comes the simplified 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数据:

At the end of the raphael js, I make an Ajax request (using jquery) to get my JSON datas :

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

    }

});

麻烦来了:我通过成功功能获得成功"状态.但是在完成脚本时出现错误:

Here come the troubles:I get a 'success' status trough the success function.BUT I got an error while completing the script :

Uncaught SyntaxError: Unexpected token o

我想念什么?无法找出与 http://jsfiddle.net/fyxZt/4/不同的地方(请参阅如何使用jquery/javascript解析json数据? )

What did I miss? Can't figure out what is different from http://jsfiddle.net/fyxZt/4/ (see how to parse json data with jquery / javascript?)

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

That was just for part 1 :-)Assuming someone could help me to fix that, I still then have no idea how to write js loop that will set the raphael vars attributes as it:

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

感谢您的帮助，请原谅我英语水平不高！温尼

Thanks an advance for your help and please excuse my unperfect english!Vinny

推荐答案

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

There is no data argument passed to the complete callback,according to jQuery API:

类型:函数(jqXHR jqXHR，字符串textStatus)

Type: Function( jqXHR jqXHR, String textStatus )

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

(...)The function gets passed two arguments: The jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object and a string categorizing the status of the request ("success", "notmodified", "nocontent", "error", "timeout", "abort", or "parsererror").

所以您只需要使用成功回调:

So you only need to use the success callback :

$.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 ...

Concerning your second question, you cannot interact directly with variable name (accessing dynamic variable) in js, so you'll need to create an object where values are indexed by one of your json's values. However, the cleanest way to handle this would probably be to add your paths to the 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);

  }
});

这篇关于使用AJAX获取JSON数据，然后修改raphael.js脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！