Question

我希望每次触发时都能让ajax更新span标记中的文本。

  $.ajax({
    type: 'GET',
    url: "JSON URL",
    cache: false,
    contentType: 'application/json',
    dataType: 'json',
    success: function(html){
      $('#status_frame_span').prepend(html.status)
      alert(html.status)
    },
    error: function(jq,stats,errmes) {
             alert("Error" + errmes);
           }
  });

第一次触发时，从URL返回的json的内容正确地预先添加到span。然而，对于随后的发射，它不会更新。

如何确保每次点击都会更新内容？

Answer 1

什么触发了对服务器的调用？它是否正在更新HTML中的按钮或链接？如果是，则更新UI时可能会丢失事件处理程序。或者，其他东西正在丢失事件处理程序，它不会调用方法来触发get请求等等。

HTH。

Answer 2

当然，您的视图只更新一次：您只调用一次服务器！

如果您的代码建议您使用long polling（请确保是这种情况，我不确定您对事件，民意调查和远程呼叫有一个非常清楚的认识），然后你需要在每次收到新请求时提出新请求！

在success和error处理程序中，您必须以递归方式向服务器发出AJAX调用。您还必须为呼叫设置超时，这可能会取消它们并在例如30秒后启动一个新的。

您还应该为递归调用实现某种限制，除非您99.99％确定服务器页面永远不会发送错误。否则，你会杀死你的客户。

为了完整起见，我必须补充一点，这对HTML5 SSE或WebSocket来说是一个很好的用例。但它们还没有为生产使用做好准备。

Answer 3

它不起作用 - 如果成功回调被调用 - 连接已经关闭，所以一旦请求完成，你的长轮询将会死亡。

长轮询背后的想法是保持连接活着。正确配置服务器，以便尽可能长时间地保持连接打开（设置超时尽可能高）。

这是我喝咖啡休息时的一种方法（未经测试）：

服务器

每条消息都必须以分隔符:: PART ::
结尾
必须正确配置服务器，这意味着将超时设置为尽可能高！

客户端（浏览器）

// setup longpoll, check all 250ms for new data in the stream var myPoller = new LongPoll('some-url', 250); // bind connection lost myPoller.bind('longpoll:end', function(evt) { alert('connection lost - trying reconnect'); }); // bind error event myPoller.bind('longpoll:error', function(evt, errmsg) { alert('error: ' + errmsg); }); // bind data event myPoller.bind('longpoll:data', function(evt, data) { try { // try to parse json data = $.parseJSON(data); // prepend $('#status_frame_span').prepend(data.status); } catch(e) { // invalid json alert('invalid json: ' + data); } });

<强> longpoll.js

var LongPoll = function(url, timeout) { // url we connect to this.url = url; // running? this.isRunning = false; // timer for checking the stream this.timer = null; // the length of the received data this.dataLength = 0; /* The messages has to be delimited by the delimiter like: first data::PART::second data::PART::third data::PART:: */ this.delimiter = RegExp.new("::PART::", 'gm'); // residue from previous transmission this.residue = '' }; // connect to server LongPoll.prototype.connect = function() { var self = this; // reset data length this.dataLength = 0; // reset residue this.residue = ''; // start ajax request this.xhr = $.ajax({ type: 'GET', url: this.url, cache: false, contentType: 'application/json', dataType: 'text', success: function(){ // the connection is dead! self.xhr = null; // trigger event $(self).trigger('longpoll:end'); // reconnect if still running if(self.isRunning) { self.connect(); } }, error: function(jq,stats,errmes) { // stop timer and connection self.stop(); $(self).trigger('longpoll:error', errmes); } }); }; // process data LongPoll.prototype.process = function(buffer) { var self = this; // check if there is anything new if(buffer.length > this.dataLength) { var newData = this.residue + buffer.substring(this.dataLength, buffer.length); // reset residue this.residue = ''; // store the new position this.dataLength = buffer.length; // split data var dataParts = newData.split(this.delimiter); // how many full parts? var fullParts = newData.match(this.delimiter).length; if(dataParts.length > fullParts) { // pop residue (incomplete message) this.residue += dataParts.pop(); } $.each(dataParts, function(index, part) { // broadcast data parts $(self).trigger('longpoll:data', $.trim(data)); }); } }; // check for data LongPoll.prototype.receive = function() { var self = this; // connection still there? if(this.xhr) { // process buffer this.process(this.xhr.responseText); } }; // start long poll LongPoll.prototype.start = function() { var self = this; // set flag this.isRunning = true; this.timer = setInterval(function() { self.receive(); }, this.timeout); this.connect(); }; // stop long poll LongPoll.prototype.stop = function() { // set flag this.isRunning = false; // clear timer clearInterval(this.timer); if(this.xhr) { // abort request this.xhr.abort(); } };

使用jQuery动态地将内容附加到元素

3 个答案: