使用ajax调用获取包含3个数组的json对象，并将数组传递给javascript

Question

I have a page that creates the following output:

<script>
  var JSONObject = { "groups":['1210103','1210103','1210103','1210405'],
                     "prices":['279,00','399,00','628,00','129,00'],
                     "titles":['','','','']
                    }; 
</script>

This page is called by an ajax call:

$.ajax({url:plink,success: function(result) { }

I now need to recieve the json arrays and pass them to ordinary javascript arrays. How do I do that?

I have tried with:

result = jQuery.parseJSON(data);
mygroups = result.groups;
myprices = result.prices;
mylabels = result.titles;

Answer 1

Change your page so that it just produces JSON:

{"groups":["1210103","1210103","1210103","1210405"],
 "prices":["279,00","399,00","628,00","129,00"],
 "titles":["","","",""]
}

Note that in JSON, you must use " , not ' , for quoting strings.

Have it return a Content-Type header of application/json . If for some reason you can't set the correct Content-Type header on the response, you can force jQuery to treat the response as JSON by adding dataType: 'json' to your ajax call, but it's best to use the correct content-Type .

Then in your ajax call's success callback, result will already be a deserialized object with three properties ( groups , prices , titles ), which will be JavaScript arrays you can work with.

Live Example | Source

---

You've said in the comments below that the page is a full HTML page with the embedded script tag and you have no control over it other than the contents of the script tag, because of the CMS you're using.

I strongly suggest moving to a more flexible CMS.

Until/unless you can do that, you can simply receive the page as text and then extract the JSON. Change your script tag to something like this:

<script>
var JSONObject = /*XXX_JSONSTART_XXX*/{"groups":["1210103","1210103","1210103","1210405"],
 "prices":["279,00","399,00","628,00","129,00"],
 "titles":["","","",""]
}/*XXX_JSONEND_XXX*/;
</script>

Note the markers. Then you can extract the JSON between the markers, and use $.parseJSON on it. Example:

(function($) {

  $.ajax({
    url: "http://jsbin.com/ecolok/1",
    dataType: "text",
    success: function(result) {
      var startMarker = "/*XXX_JSONSTART_XXX*/";
      var endMarker   = "/*XXX_JSONEND_XXX*/";
      var start, end;

      start = result.indexOf(startMarker);
      if (start === -1) {
        display("Start marker missing");
      }
      else {
        start += startMarker.length;
        end = result.indexOf(endMarker, start);
        if (end === -1) {
          display("End marker missing");
        }
        else {
          result = $.parseJSON(result.substring(start, end));
          display("result.groups.length = " + result.groups.length);
          display("result.prices.length = " + result.prices.length);
          display("result.titles.length = " + result.titles.length);
        }
      }
    }
  });

  function display(msg) {
    $("<p>").html(String(msg)).appendTo(document.body);
  }

})(jQuery);

Live Copy | Source