jQuery AJAX bỏ phiếu cho phản hồi JSON, xử lý dựa trên kết quả AJAX hoặc nội dung JSON

Question

Tôi là lập trình viên JavaScript/jQuery mới thành lập, vì vậy các ví dụ cụ thể/thực thi sẽ được đánh giá rất nhiều.

Dự án của tôi yêu cầu sử dụng AJAX để thăm dò ý kiến ​​URL trả về JSON chứa nội dung được thêm vào DOM hoặc một thông báo {"trạng thái": "đang chờ xử lý") cho biết rằng chương trình phụ trợ vẫn đang hoạt động phản hồi JSON với nội dung. Ý tưởng là yêu cầu đầu tiên cho URL kích hoạt chương trình phụ trợ để bắt đầu xây dựng một phản hồi JSON (sau đó được lưu trữ) và các cuộc gọi tiếp theo kiểm tra xem JSON này đã sẵn sàng chưa (trong trường hợp này nó được cung cấp).

Trong kịch bản của tôi, tôi cần phải thăm dò ý kiến ​​URL này trong khoảng thời gian 15 giây lên đến 1:30 phút, và làm như sau:.

• Nếu yêu cầu kết quả AJAX trong một lỗi, chấm dứt kịch bản .
• Nếu yêu cầu AJAX dẫn đến thành công và nội dung JSON chứa {"trạng thái": "đang chờ xử lý"}, hãy tiếp tục bỏ phiếu.
• Nếu yêu cầu AJAX kết quả thành công và nội dung JSON chứa nội dung có thể sử dụng (tức là bất kỳ phản hồi hợp lệ nào khác ngoài {"trạng thái": "đang chờ xử lý")), sau đó hiển thị nội dung đó, ngừng bỏ phiếu và chấm dứt tập lệnh.

Tôi đã thử một vài phương pháp tiếp cận với thành công hạn chế, nhưng tôi hiểu rằng tất cả chúng đều lộn xộn hơn mức cần thiết. Dưới đây là một chức năng xương Tôi đã sử dụng thành công để thực hiện một yêu cầu AJAX duy nhất tại một thời điểm, mà làm công việc của mình nếu tôi nhận được nội dung có thể sử dụng từ phản ứng JSON:

// make the AJAX request 
function ajax_request() { 
    $.ajax({ 
    url: JSON_URL, // JSON_URL is a global variable 
    dataType: 'json', 
    error: function(xhr_data) { 
     // terminate the script 
    }, 
    success: function(xhr_data) { 
     if (xhr_data.status == 'pending') { 
     // continue polling 
     } else { 
     success(xhr_data); 
     } 
    }, 
    contentType: 'application/json' 
    }); 
} 

Tuy nhiên, chức năng này hiện đang làm gì trừ khi nó nhận được phản hồi JSON hợp lệ chứa nội dung có thể sử dụng.

Tôi không biết phải làm gì trên các dòng chỉ là nhận xét. Tôi nghi ngờ rằng một chức năng khác nên xử lý việc bỏ phiếu và gọi ajax _ yêu cầu() khi cần thiết, nhưng tôi không biết cách thanh lịch nhất cho yêu cầu ajax _() để truyền đạt kết quả của nó trở lại chức năng bỏ phiếu để nó có thể phản hồi thích hợp.

Bất kỳ trợ giúp nào được đánh giá rất nhiều! Vui lòng cho tôi biết nếu tôi có thể cung cấp thêm thông tin. Cảm ơn!

Answer 1

Bạn có thể sử dụng thời gian chờ đơn giản để gọi đệ quy ajax_request.

success: function(xhr_data) { 
    console.log(xhr_data); 
    if (xhr_data.status == 'pending') { 
    setTimeout(function() { ajax_request(); }, 15000); // wait 15 seconds than call ajax request again 
    } else { 
    success(xhr_data); 
    } 
} 

Kiểm tra bộ đếm xung quanh dòng đó và bạn có số phiếu thăm dò ý kiến ​​tối đa.

if (xhr_data.status == 'pending') { 
    if (cnt < 6) { 
    cnt++; 
    setTimeout(function() { ajax_request(); }, 15000); // wait 15 seconds than call ajax request again 
    } 
} 

Bạn không cần phải làm bất cứ điều gì trong chức năng lỗi của mình trừ khi bạn muốn đặt cảnh báo hoặc nội dung nào đó. thực tế đơn giản là lỗi sẽ ngăn chặn chức năng thành công khỏi bị gọi và có thể kích hoạt một cuộc thăm dò khác.

Answer 2

Off đỉnh đầu của tôi:

$(function() 
{ 
    // reference cache to speed up the process of querying for the status element 
    var statusElement = $("#status"); 

    // this function will run each 1000 ms until stopped with clearInterval() 
    var i = setInterval(function() 
    { 
     $.ajax(
     { 
      success: function (json) 
      { 
       // progress from 1-100 
       statusElement.text(json.progress + "%"); 

       // when the worker process is done (reached 100%), stop execution 
       if (json.progress == 100) i.clearInterval(); 
      }, 

      error: function() 
      { 
       // on error, stop execution 
       i.clearInterval(); 
      } 
     }); 
    }, 1000); 
}); 

Answer 3

cảm ơn bạn rất nhiều vì hàm. Đó là một chút lỗi, nhưng đây là sửa chữa. Câu trả lời của roosteronacid không dừng lại sau khi đạt 100%, bởi vì sử dụng hàm clearInterval không đúng.

Đây là một chức năng làm việc:

$(function() 
{ 
    var statusElement = $("#status"); 

    // this function will run each 1000 ms until stopped with clearInterval() 
    var i = setInterval(function() 
    { 
     $.ajax(
     { 
      success: function (json) 
      { 
       // progress from 1-100 
       statusElement.text(json.progress + "%"); 

       // when the worker process is done (reached 100%), stop execution 
       if (json.progress == 100) clearInterval(i); 
      }, 

      error: function() 
      { 
       // on error, stop execution 
       clearInterval(i); 
      } 
     }); 
    }, 1000); 
}); 

Các clearInterval() hàm được becomming id khoảng như tham số và sau đó mọi thứ đều tốt ;-)

Cheers Nik

Answer 4

Bạn có thể sử dụng hàm javascript setInterval để tải nội dung mỗi 5 giây một lần.

var auto= $('#content'), refreshed_content; 
    refreshed_content = setInterval(function(){ 
    auto.fadeOut('slow').load("result.php).fadeIn("slow");}, 
    3000); 

Đối với bạn reference-

Auto refresh div content every 3 sec