Question

如果在其他地方已经回答了这个问题，我很抱歉。我确实搜索了很多，但没有完全回答我的问题。另外，我有点新意，所以请在回答时牢记这一点......

我有一个我在http://timeline.verite.co/使用的时间表。这是一个很棒的时间表，可以通过JSON文件进行更新。但是，我希望能够通过我的网站上的用户表单更新JSON文件。

例如：有一个管理页面...表单区域的代码在这里：

        <div id = "contentarea">    
        <div id="tab1">
            <form id="randomevents" method="POST" action="#">
                <ul>
                    <li><label for="event_title">Event Title</label>
                        <input id="event_title" type="text"></li>
                    <li><label for="event_details">Event Details</label>
                        <textarea rows="15" cols="44"></textarea></li>
                    <li><label for="date">Date: ex "mm/dd/yyyy"</label>
                        <input id="date" type="text"></li>
                    <div id="submitevent"><button type="submit" class="button">Submit</button></div>

                </ul>
            </form>

时间轴位于另一页......它的代码是：

        <div id="timeline-embed"></div>
    <script type="text/javascript">
        var timeline_config = {
        width:              '100%',
        height:             '300px',
        source:             'data.json',
        start_at_end:       false,                          
        start_at_slide:     '1',                            
        hash_bookmark:      true,                           
        font:               'Bevan-PotanoSans',             
        maptype:            'watercolor',                   
        css:                'js/maintimeline/compiled/css/timeline.css',    
        js:                 'js/maintimeline/compiled/js/timeline-min.js'   
    }

</script>

JSON文件看起来像这样（部分）：

{
"timeline":
{
    "headline":"Helen Queen",
    "type":"default",
    "text":"A beautiful mother, wife, woman",
    "date": [
        {
            "startDate":"1924,1,26",
            "headline":"A little girl is born into a big family!",
            "text":"<p>Helen is born on January 11, 1924. She is the fifth girl and the eight overall child!</p>",
            "asset":
            {
                "media":"images/fortimeline/helen.jpg",
                "credit":"",
                "caption":""
            }
        },

我想要的是让用户在管理页面上的表单中输入内容并让它更新（并添加到）JSON文件，然后该文件将自动更新时间轴页面。就像我说的那样，我已经找到了答案，但没有完全匹配，或者答案让我感到困惑！

谢谢！

Answer 1

您的管理区域应该将更改的文件发送到服务器，我想您已经实施了该部分。

您的时间线页面（客户端）需要做的是获悉数据发生了变化。这可以通过两种方式完成：

定期轮询服务器询问是否有更改。这很容易做到：创建一个计时器，例如每60秒从服务器再次请求数据，将其与数据进行比较，如果更改，则重绘时间线。这种方法在服务器端没有任何特殊要求。更有效的方法是不要一次又一次地检索完整文件，而是实现服务器端方法，如“getLastUpdatedTimestamp”，它返回文件上次更新的时间。然后，客户端可以比较此时间戳而不是整个文件，如果更改，则检索新文件。
通过推送通知自动通知服务器。这将是最好的解决方案，但实现起来还不是很容易（需要在客户端和服务器之间保持套接字打开，这只有现代浏览器支持）。

使用HTML表单输入更新JSON文本文件

1 个答案: