Ответ 1

с помощью ajax очень просто,
Я рекомендую вам использовать HTML-тип данных для этого, поскольку у вас есть таблица в вашем контейнере,
здесь есть документация api = > http://api.jquery.com/jQuery.ajax/
здесь скрипка, которую я сделал для вас = > http://jsfiddle.net/sijav/kHtuQ/19/ или http://fiddle.jshell.net/sijav/kHtuQ/19/show/

Я поместил ajax-код в функцию с именем updateClass (url), URL-адрес которой соответствует URL-адресу, и он добавит контейнер с HTML-кодом get = >

function updateClass(url){
    $.ajax({
        url: url,
        dataType: "HTML",
        error: function(msg){
            alert(msg.statusText);
            return msg;
        },
        success: function(html){
            $("#container").html(html);
        }
    });
}

Я добавил refreshClass, который обновляет весь класс контейнера, = >

function refreshClass(){
            updateClass("http://fiddle.jshell.net/sijav/mQB5E/5/show/"); //update the class
}

и изменен на селектор изменений ниже кода = >

var classUpdateI; //stands for our interval updating class
$(".class-selector").on("change",function(){
    if (classUpdateI!=null)clearInterval(classUpdateI); //If the selector changed clear the interval so the container won't be update on it own
    if(this.value == "")
        return; // if the value is null don't do anything
    else if(this.value == "allclassnup"){
        refreshClass(); //if the value is allclassnup which is stands for All Non-Updating just refresh the whole class 
    }
    else if(this.value == "allclassup"){
        refreshClass(); //if the value is allclassup which is stands for All Updating refresh the whole class and set an interval for thirty second (look for 30*1000)
        classUpdateI = setInterval(refreshClass,30*1000);
    }
    else //else then it a simple class value, just simply update the current class
        updateClass(this.value);
})

Надеюсь, что это поможет;)
EDIT. Отредактировано так, что он может получить большую таблицу (не генерировать ее!), и все обновления будут обновляться с интервалом в 30 секунд
AnotherEDIT: Верьте или нет, я сделал весь ваш вопрос!
РАБОЧИЙ ФИДДЛ: http://jsfiddle.net/sijav/kHtuQ/39/ или http://fiddle.jshell.net/sijav/kHtuQ/39/show/
1, потому что это было сделано только для последнего html, для нового мы должны сделать это снова! поэтому поместите всю функцию $('tr').click() в другую функцию и вызовите ее, когда это необходимо.
- Вы хотите, чтобы это полностью работало? он немного сложный, но он может работать с небольшим изменением кодов! что я собираюсь показать вам: "Хорошо, здесь algurithm мы должны поместить текущий класс в селектор класса в файл cookie, а затем мы можем его прочитать всякий раз, когда мы обновляем или перезагружаем страницу и помещаем необходимый выбранный класс и так далее... < ш > но в разработке кода здесь я сделал, чтобы он работал,
сначала я сделал глобальную переменную под названием FirstTimeInit = true;, чтобы быть уверенным, что мы в первый раз загружаем страницу или нет, во-вторых, я поставил цикл for, который делает вещи, выделяющие загрузку страницы функцией selectSelectedClass, почему? потому что нам нужно называть это много раз. В-третьих, я добавил некоторый оператор if, чтобы убедиться, что если мы сможем читать куки, тогда изменим выделенные вещи и текущий класс, вот код:

if(readCookie("CurrentClass")) //if we can read coockie
    $(".class-selector").val(readCookie("CurrentClass")).change(); //change it value to current cookie and trigger the change function
else{ // else
    selectSelectedClass(); //select those which was highlighted before
    trClick(); //make things clickable
    FirstTimeInit = false; //and turn of the first time init
}

Четвертое добавление файла cookie создания при изменении значения селектора = > createCookie("CurrentClass",$(".class-selector").val(),1);
и, наконец, изменить успех при получении Ajax к этому

        success: function(html){
            $("#container").html(html + '<a id="KEY"></a>'); //the html container changer with adding extra id , I'll explain it later it for your second question
            if(FirstTimeInit){ //if it is First Time then
                selectSelectedClass(); //highlight which was highlighted after put the correct html
                FirstTimeInit = false; // turn of the first time init
            }
            else //else
                for (var i=0;i<($("table").children().length);i++){
                    if(readCookie(i))
                        eraseCookie(i); //erase every cookie that has been before because the table is now changed and we're going on another table so old cookie won't matter
                }
            trClick(); //make things selectable!
        }

Также, чтобы сделать это bugfree, я изменил refreshClass, чтобы включить firstinit, когда выбранный класс является полностью или он равен нулю, потому что тогда у нас есть все классы и нужны эти куки! поэтому здесь код:

function refreshClass(){
    if(readCookie("CurrentClass")=="allclassnup"||readCookie("CurrentClass")=="allclassup"||readCookie("CurrentClass")==null)
        FirstTimeInit = true;
    updateClass("http://fiddle.jshell.net/sijav/mQB5E/5/show/");
}

2 <a id="TOP"></a> должен быть до контейнера, <a id="KEY"></a> должен быть сгенерирован в конце контейнера после помещения html в контейнер. поэтому $("#container").html(html + '<a id="KEY"></a>');

3 Кнопка "Следующая" и "Предыдущая" была разработана для предыдущего дизайна без аякса. Теперь ему нужно другое решение! см. эти простые коды, например

$("#PreviousClass").click(function(){//on prev click
    $(".class-selector").val($(".class-selector option:selected").prev().val()).change() //change the value to the prev on and trigger the change
});

$("#NextClass").click(function () {//on next click
    $(".class-selector").val($(".class-selector option:selected").next().val()).change() //change the value to the prev on and trigger the change
});

4 Да Возможно, вы должны изменить свой ключ и вниз на эти коды, и вам хорошо идти = >

currentClass=0;
$("a.TOPJS").click(function () {
    if(currentClass>0){
        currentClass--
        scrollToAnchor('CLASS'+currentClass);
    }
});

$("a.KEYJS").click(function () {
    if($("a[id='CLASS" + currentClass + "']")[0]!=undefined){
        currentClass++
        scrollToAnchor('CLASS'+currentClass);
    }
    else
        scrollToAnchor('CLASSMAX');
});

Godd Luck

Другой запрос EDIT: (надеюсь, что это будет последний!)
Рабочий скрипт: http://jsfiddle.net/sijav/kHtuQ/42/ или http://fiddle.jshell.net/sijav/kHtuQ/42/show/
хорошо, как вам не понравился класс изменений при обновлении до того, который был в нем, я удалил это, и, лучше, я добавил некоторые коды, чтобы иметь классы в куки, поскольку файлы cookie не являются деревом, есть какие-то условия, класс читается из последнего символа селектора классов, поэтому обязательно должен иметь номер класса у последнего символа, например → Class number ***5***, номер 5 будет прочитан для селектора классов!
EDIT: оптимизировать класс next и prev см. http://jsfiddle.net/sijav/kHtuQ/46/
EDIT: в соответствии с запрошенным комментарием. Это то, что я пытаюсь вам сказать, иногда демонстрационное шоу на jsfiddle.net, иногда оно отображается на fiddle.jshell.net, это разные доменов, и вы не можете получить html из разных доменов.
1) Вы можете поместить функцию только в Interval или просто создать другую функцию и называть ее правильным способом: →

classUpdateI = setInterval(function(){updateClass(this.value,parseInt(a.charAt(a.length-1),10));},30*1000);

2) Пропуски?! Я не могу найти ваш второй вопрос! 3) Ну,... trclick нужно изменить... to = >

function trClick(tIndex){ //tIndex would be classnumber from now on
    if (tIndex == -1){ //if it is all updating or all non updating
        $("tr").click(function(){ //do the previous do
            $(this).toggleClass('selected').siblings().removeClass('selected');
            if(readCookie($(this).parent().index("tbody"))){
                if(readCookie($(this).parent().index("tbody"))==$(this).index())
                    eraseCookie($(this).parent().index("tbody"));
                else{
                    eraseCookie($(this).parent().index("tbody"));
                    createCookie($(this).parent().index("tbody"),$(this).index(),1);
                }
            }
            else
                createCookie($(this).parent().index("tbody"),$(this).index(),1);
        });
    }
    else{ //else
        $("tr").click(function(){ //on click
            $(this).toggleClass('selected').siblings().removeClass('selected');//do the toggle like before
            if(readCookie(tIndex)){ //if you can read the CLASS cookie, not the current index of table because our table has only one row
                if(readCookie(tIndex)==$(this).index()) //as before if we selecting it again
                    eraseCookie(tIndex); //just erase the cookie
                else{ //else
                    eraseCookie(tIndex); //select the new one
                    createCookie(tIndex,$(this).index(),1);
                }
            }
            else
                createCookie(tIndex,$(this).index(),1); //else if we can't read it, just make it!
        });
    }
}

и когда мы назовем его на успех Ajax, мы должны называть его классомNumber = > trClick(classNumber);
Последняя рабочая скрипка: http://jsfiddle.net/sijav/kHtuQ/53/ или http://fiddle.jshell.net/sijav/kHtuQ/53/show/

Удача

Ответ 2

Честно говоря, мне сложно с кодом, который вы опубликовали, в основном потому, что я не понимаю пример JSON. Если вы собираетесь хранить плоский HTML в качестве значений JSON, имеет смысл просто $.ajax HTML в DOM, а не кодирование JSON, разбор и вставка. При этом я предполагаю, что JSON не был реалистичным примером и что он примет больше формы:

{ class_name: "Class 1", description: "Blah Blah Blah" }

С учетом этого предположения этот хорошо документированный, но непроверенный пример должен указать вам в правильном направлении. По существу, я делаю следующее:

• Определение HTML-шаблона
• Создайте простую функцию шаблонов для переноса значений JSON в шаблон HTML
• Настройка интервала для опроса сервера для новых данных с помощью setInterval вызова функции, которая передает временную метку последнего запроса, который мы запросили на вашей серверной стороне JSON script, используя getJSON

Вот мой пример, пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы.

<script>
//  I wrapped this in a self-invoking anonymous function to prevent adding new global variables
(function(){
    var SECONDS_TO_POLL = 3
    ,   $parent_node = $('#node-to-append-to')
    ,   last_timestamp = null // this will be a timestamp passed to the server
    ,   template = '<table id="gradient-style"> \
            <tbody> \
                <thead> \
                    <tr>
                        <th scope="col"><a id="{ident}" optionname="{class_name}"></a>Class</th> \
                    </tr> \
                </thead> \
                <tr><td>{class_name}</td></tr> \
            </tbody> \
            <tfoot> \
                <tr> \
                    <th class="alt" colspan="34" scope="col"><a id="KEY"></a><img class="headimager" src="{image}" /></th> \
                </tr> \
                <tr> \
                    <td colspan="34"><em><b>Data</b> - Test</em></td> \
                </tr> \
            </tfoot> \
        </table>';

    /**
    *   simple templating function
    *   @param template String template using bracket vars (e.g. <h1>{message}</h1>)
    *   @param values Object literal (e.g. {message: "Hello"})
    *   @return Rendered HTML template
    */
    var render_template = function(template, values) {
            values = values || {};
            return template.replace(/{([^{}]*)}/g, function(bracketed, clean){
                  var object_value = values[clean];
                  return ['string', 'number'].indexOf((typeof object_value)) > -1 ? object_value : bracketed;
            });
        };

    // this is our polling function, will retrieve the JSON from the server, convert to HTML using template and render to the DOM
    var poller = function(){
        // load the JSON and pass a GET var telling the server what timestamp to query from (e.g. WHERE data.timestamp > last_timestamp)
        $.getJSON('/path/to/json?last_retrieved='+last_timestamp, function(data){
            // render the new data into our HTML template
            var html = render_template(template, data);
            // append the result to the parent DOM node
            $parent_node.append(html);
        })
        // get a current timestamp so that we can limit the server results to those 
        last_timestamp = new Date().getTime();
    }

    // retrieve new results every N seconds
    setInterval(poller, SECONDS_TO_POLL*1000);
})()
</script>

Кроме того, просто чтобы поклониться этому, если вы просто возвращаете HTML с сервера, вы можете (по большей части) просто заменить $.getJSON на $.get, отказаться от всего отображения шаблона на клиенте -side и просто добавьте ответ в DOM

(function(){
    var SECONDS_TO_POLL = 3
    ,   $parent_node = $('#node-to-append-to')
    ,   last_timestamp = null // this will be a timestamp passed to the server

    // this is our polling function, will retrieve the HTML from the server and render to the DOM
    var poller = function(){
        // load the HTML pass a GET var telling the server what timestamp to query from (e.g. WHERE data.timestamp > last_timestamp)
        $.get('/path/to/server?last_retrieved='+last_timestamp, function(html){
            // append the result to the parent DOM node
            $parent_node.append(html);
        })
        // get a current timestamp so that we can limit the server results to those 
        last_timestamp = new Date().getTime();
    }

    // retrieve new results every N seconds
    setInterval(poller, SECONDS_TO_POLL*1000);
})()

Ответ 3

Лучший способ решить вашу проблему - использовать библиотеку привязки, такую ​​как нокаут. С его помощью вы разделяете свои данные и свое мнение и только беспокоитесь о том, как вы обновляете данные, представление автоматически обновится. Это то, с чем вам кажется, в настоящее время вы боретесь.

Вот почему я сделал небольшую выборку, генерирующую список, и обновляю данные, постоянно проверяя его (используя фальшивую службу, которая всегда возвращает те же данные, которые меняются случайным образом).

Вот пример, который я использовал, используя нокаут: Пожалуйста, взгляните на страницу документа с нокаутом: http://knockoutjs.com/documentation/introduction.html

HTML: Определите простую таблицу с заголовком и содержимым

<table style="width: 100%" border="1">
    <thead>
        <tr>
            <td>
                <p><b>Classes</b>   
                </p>
            </td>http://jsfiddle.net/yBat5/#fork
            <td>
                <p><b>Childs</b>
                </p>
            </td>
        </tr>
    </thead>
    <tbody data-bind="foreach: Classes">
        <tr>
            <td>
                <p data-bind=" text: Class"></p>
            </td>
            <td>
                <p data-bind=" text: Child"></p>
            </td>
        </tr>
    </tbody>
</table>

JavaScript:

$(function () {
   // define a ViewModel for your data
    function ViewModel() {
        this.Classes = ko.observableArray([{
            "Class": "test",
                "Child": "Max"
        }, {
            "Class": "test2",
                "Child": "Walter"
        }]);
    }

    var vm = new ViewModel(),
        dummyData = [];

    // create a lot of dummy data sets
    for (var i = 0; i < 1000; i++) {
        dummyData.push({
            "Class": "test " + i,
                "Child": "Child" + i
        })
    }

    // constantly poll for new data
    // JS fiddle implements a simple echo service, which we can use
    // to simulate data changes we change a rendon number
    function poll() {
        $.ajax({
            "url": "\/echo\/json\/",
                "type": "POST",
                "data": {
                "json": JSON.stringify(dummyData),
                    "deley": 3
            },
                "success": function (data) {
                vm.Classes(data);

                // poll again (3 seconds so we see how fast the update is)
                setTimeout(poll, 300);

                    // change a random entry to see that data changes
                var randomnumber=Math.floor(Math.random()*1000);
                    dummyData[randomnumber].Child = "Child"  +randomnumber +" changed"
            }
        });
    }

    poll();

    // apply it to the page, knocout now does the binding for you
    ko.applyBindings(vm);
});

Fiddle: http://jsfiddle.net/yBat5/3/