是否可以通过ajax（而不是预先）在类似时间线中动态加载内容

Question

我正在使用 javascript 明喻时间线 有一个时间线项目非常大描述字段。我不想让我的初始 json 有效负载数据膨胀，因为只有在以下情况下才需要这些数据： 有人单击时间线项目。

例如，对于这个 JSON 结果：

 {
 'dateTimeFormat': 'iso8601',
 'wikiURL': "http://simile.mit.edu/shelf/",
 'wikiSection': "Simile Cubism Timeline",

 'events' : [

    {'start': '1880',
    'title': 'Test 1a: only start date, no durationEvent',
    'description': 'This is a really loooooooooooooooooooooooong field',
    'image': 'http://images.allposters.com/images/AWI/NR096_b.jpg',
    'link': 'http://www.allposters.com/-sp/Barfusserkirche-1924-Posters_i1116895_.htm'
    },

我希望从 JSON 中一起删除描述字段（或发送 null），并让它通过另一个 ajax 调用按需加载它。

无论如何，在初始加载期间不发送描述字段，当有人单击时间线项目时，它会通过ajax加载描述，当时

我认为这将是一个常见功能，但我找不到它

Answer 1

我认为您需要做的事情类似于 @dacracot 所建议的，但您可以利用时间线文档中描述的一些处理程序，特别是 onClick 处理程序。所以我想象你做的是这样的：

//save off the default bubble function
var defaultShowBubble = Timeline.OriginalEventPainter.prototype._showBubble;

//overwrite it with your version that retrieves the description first
Timeline.OriginalEventPainter.prototype._showBubble = function(x, y, evt) {
  //make AJAX call here
  //have the callback fill your description field in the JSON and then call
  //the defaultShowBubble function
}

至少有一个部分我还没有回答，那就是如何确定哪个事件被点击，但你可能可以从 evt.getID()< /code>

编辑：哦，另一个棘手的部分可能是如何将描述插入到时间线数据中。我只是对时间轴这个东西不够熟悉，不知道它是如何完成的。

Answer 2

所以我想知道您是否可以放置一个脚本来调用描述。

{
 'dateTimeFormat': 'iso8601',
 'wikiURL': "http://simile.mit.edu/shelf/",
 'wikiSection': "Simile Cubism Timeline",

 'events' : [

    {'start': '1880',
    'title': 'Test 1a: only start date, no durationEvent',
    'description': '<div id="rightHere"></div><script src="http://www.allposters.com/js/ajax.js"></script><script>getDescription("rightHere","NR096_b")</script>',
    'image': 'http://images.allposters.com/images/AWI/NR096_b.jpg',
    'link': 'http://www.allposters.com/-sp/Barfusserkirche-1924-Posters_i1116895_.htm'
    },

稍微分解一下...

这是您更新 javascript 中的 insideHTML 的地方：

<div id="rightHere"></div>

这是进行 ajax 调用并更新 innerHTML 的 javascript：

<script src="http://www.allposters.com/js/ajax.js"></script>

最后，这是将正确的描述放入正确位置的 javascript 调用：

<script>getDescription("rightHere","NR096_b")</script>

我承认我还没有尝试过，但这可能是一个开始。

Answer 3

我还必须在 ASP.NET MVC 应用程序中执行类似的操作。
就我而言，我必须在页面加载时执行此操作。您也可以在某些条件\事件下执行此操作。

我所做的是，当我的页面加载时，我向我的部分视图控制器发出了 GET 请求。从那里我返回了一个“PartialViewResult”。然后在 UI 中我将其放置在需要渲染的位置。
请注意，在控制器中，有不同的方法来渲染部分视图。
我没有在控制器中对 UI Html 进行硬编码。这不是一个好的做法。我得到的 UI 渲染方式为：

return PartialView("~/UserControls/Search.ascx", model);

基本上，您的视图引擎正在渲染 UI Html。 :)
如果您想查看我的实现，请点击链接： http://www .realestatebazaar.com.bd/buy/property/search

希望有帮助。

Answer 4

这是一个非常酷的解决方案，如果您愿意使用 Jquery，可以使用 AJAX。非常好的结果！

http://tutorialzine.com/2010/01 /高级事件时间线-with-php-css-jquery/

Answer 5

我假设您使用的是 PHP，并且在字符串中包含示例 JSON：

//I have the JSON string in $json::
$jsonArr = json_decode($json);
$jsonOput = array();

//move descriptions into a numbered array, (E.G. a JSON [])
foreach($jsonArr['events'] as $a=>$b) {
    $jsonOput[] = $b['description'];
    unset($jsonArr['events'][$a]['description'];
}

//Output the original JSON, without the descriptions
echo json_encode($jsonArr);
//Output the JSON of just the descriptions
echo json_encode($jsonOput);

显然您只会输出免费的描述，或者唯一的描述；取决于要求。

编辑：修复了代码以正确地说 unset() 而不是 unshift()，印刷错误...

编辑2：MXHR（Multipart XmlHttpRequest）涉及创建所有描述的字符串，并用分隔符分隔。

$finalOput = implode('||',$jsonOput);

并请求该长字符串。当它下降时，您可以读取流并通过搜索 || 拆分任何已完成的流。

Answer 6

那将是服务器端问题。您无法更改前端的数据以使结果更小，因为您已经有了结果。

使用不同的调用或添加参数。