如何从服务器返回的JSON数据创建JavaScript对象

Question

我需要帮助，我想创建一个从AJAX请求返回对象的函数，因此可以从服务器上的数据创建一个新对象，如下所示：

var foo = bar('api.php?x=y');

该函数应将查询字符串作为参数，服务器将数据作为JSON返回。

您能告诉我如何使用jQuery进行操作吗？您有任何想法/示例吗？

我将继续讨论我的问题，因为似乎我做错了所有事情。 我试图基于实时数据 （股票报价）创建一个Web应用程序，因此它必须不断地从服务器请求更新的信息。 初始化应用程序时，第一步是从要包含的股票中获取静态数据（例如股票代号和发行人），我认为做到这一点的最佳方法是在服务器上拥有一个数据库，并使用一个API查询并将选定的库存数据作为JSON返回。 下一步是向服务器上的另一个API发出请求，该API返回所选股票的实时数据（例如价格和数量），当返回完整数据时，将使用模板引擎将其呈现为html。 然后，该应用程序必须在某个时间间隔内不断调用第二个API，以更新实时数据并再次呈现。 另外，您应该能够重新选择库存并重新开始该过程。

我认为构建这样的应用程序的最佳方法是将数据保存在自定义对象中，该对象具有自己的稍后修改数据的方法（例如排序和过滤），因此，如果foo是我的股票数据对象，则可以执行类似foo.sort()或类似foo.render()来创建数据的html表示形式。 这就是为什么我认为最好的方法是根据AJAX调用返回的数据创建对象。 您能否告诉我这是构建这样的应用程序的正确方法还是向正确的方向指出？

谢谢

Answer 1

根据定义，AJAX是异步的，因此它不太适合您的问题。 我建议将jQuery.ajax（ 请参阅参考资料 ）与回调一起使用：

$.ajax({
  url: 'api.php?x=y',
  dataType: 'json',
  success: function (foo) {
    // Do stuff here using 'foo'
  }
});

Answer 2

如果JSON字符串是服务器响应的内容，则只需将它转换为JS对象就很容易了。

var resp_object = JSON.parse(response);

Answer 3

您正在用自己的方法同步思考。

这意味着您认为函数调用“ bar（'api.php？x = y'）”应立即返回检索到的数据/对象。 这样做的缺点是，在等待答案时浏览器中的代码执行被阻止。

为了克服这个问题，您需要创建一个异步回调处理程序（使用“ jQuery.ajax”时为“成功”处理程序），如user595228之前指出的那样。 呈现返回信息的代码将进入此处理程序。

对于如何构造代码的问题，这取决于所获取数据的复杂程度以及在应用程序上使用该数据的频率。 如果它很复杂并且在多个地方使用，则可能有必要创建一个具有辅助功能的数据对象，以避免代码重复并将关于数据的代码放在一个地方。 如果只将它们渲染到一个位置，而唯一要做的就是简单的排序和显示，那么我会将该逻辑放在一个简单的函数中，以降低复杂性。

Answer 4

您可以创建一个Jquery插件并将对象挂接到其中。 例：

var foo = tablesort({}); // tablesort is plugin Jquery
foo.sort();

您需要在Jquery插件中实现sort方法，这意味着：使用ajax从服务器获取数据并填充对象的属性或执行某些操作

Answer 5

是否将实时数据推送给您？ 意思是说，如果您在数据通过线路传输时没有任何声音在听，您会错过吗？ 还是将其堆积在队列中等待您轮询并获取它？

如果遇到第一种情况，则可以让服务器从库存服务中获取数据并将数据排队给您-这使您对如何处理多个用户的队列产生了疑问。 或者，您可以设置一个websocket（并非所有浏览器都支持HTML5）或查看一个彗星解决方案（可能涉及Flash对象或大量快速轮询）。

如果遇到第二种情况，则可以使用Ajax来获取计时器上可用的数据块。 您需要使用ajax的异步方面，否则屏幕可能会冻结等待响应。 使用类似jquery的东西可以帮助您完成该过程-无需重新发明轮子。

Answer 6

我通常更喜欢将数据的表示形式与数据本身分开。 我建议不要在从服务器接收到对象之后向对象添加函数，而建议传递数据对象。

例：

function renderStockData(data) {
  // build and return HTML from data
}

function loadStockData(url, callback) {
  $.ajax({
    url: url,
    dataType: 'json',
    success: callback
  });
}

// Later that day...
loadStockData('api?stock=GOOG', function (data) {
  var renderedHtml = renderStockData(data);
  // ...
});

这是您正在寻找的建议类型吗？