동일한 웹 페이지에서 두 개의 Ajax 요청을 수행하는 방법은 무엇입니까?

저는 Ajax 요청에 초보자입니다.동일한 웹 페이지에서 두 개의 Ajax 요청을 수행하는 방법은 무엇입니까?

Prototype을 사용하고 Jquery를 사용하여 Ajax 요청을했습니다. 이 둘은 작동하지만, 내가 그들을 따로 불러야 만한다. 이 충돌에 대한 해결책을 얻는 데 도움이 필요합니다.

아래 코드에서 "$ .fn.bindPostCommentHandler = function()"에 대한 Ajax 요청 만 작동합니다. "new VoteHijacker ("link ")에 대한 Ajax 요청;" 작동 안됨.

어떻게이 두 Ajax 요청을 함께 사용할 수 있습니까?

다음은 내 웹 페이지의 코드입니다.

// This is an extend solution to inject in the HEADERS the csrftoken 
Ajax.Base.prototype.initialize = Ajax.Base.prototype.initialize.wrap(
     function (callOriginal, options) { 
     var headers = options.requestHeaders || {}; 
     headers["X-CSRFToken"] = getCookie("csrftoken"); 
     options.requestHeaders = headers; 
     return callOriginal(options); 
     } 
    );

하나를 "prototype.extend.js"에

var VoteHijacker = Class.create(); 
VoteHijacker.prototype = 
{ 
    initialize: function(prefix) 
    { 
    this.prefix = prefix || ""; 
    this.registerEventHandlers(); 
    }, 

    registerEventHandlers: function() 
    { 
    $$("form." + this.prefix + "vote").each(function(form) 
    { 
     Event.observe(form, "submit", this.doVote.bindAsEventListener(this), false); 
    }.bind(this)); 
    }, 

    doVote: function(e) 
    { 
    Event.stop(e); 
    var form = Event.element(e); 
    var id = /(\d+)$/.exec(form.id)[1]; 
    var action = /(up|down|clear)vote/.exec(form.action)[1]; 
    new Ajax.Request(form.action, { 
     onComplete: VoteHijacker.processVoteResponse(this.prefix, id, action) 
    }); 
    } 
}; 

VoteHijacker.processVoteResponse = function(prefix, id, action) 
{ 
    return function(transport) 
    { 
    var response = transport.responseText.evalJSON(); 
    if (response.success === true) 
    { 
     var upArrowType = "grey"; 
     var upFormAction = "up"; 
     var downArrowType = "grey"; 
     var downFormAction = "down"; 

     if (action == "up") 
     { 
      var upArrowType = "mod"; 
      var upFormAction = "clear"; 
     } 
     else if (action == "down") 
     { 
      var downArrowType = "mod"; 
      var downFormAction = "clear"; 
     } 

     VoteHijacker.updateArrow("up", prefix, id, upArrowType); 
     VoteHijacker.updateArrow("down", prefix, id, downArrowType); 
     VoteHijacker.updateFormAction("up", prefix, id, upFormAction); 
     VoteHijacker.updateFormAction("down", prefix, id, downFormAction); 
     VoteHijacker.updateScore(prefix, id, response.score); 
    } 
    else 
    { 
     alert("Erro a votar: " + response.error_message); 
    } 
    }; 
}; 

VoteHijacker.updateArrow = function(arrowType, prefix, id, state) 
{ 
    var img = $(prefix + arrowType + "arrow" + id); 
    var re = new RegExp("a" + arrowType + "(?:mod|grey)\\.png"); 
    img.src = img.src.replace(re, "a" + arrowType + state + ".png"); 
}; 

VoteHijacker.updateFormAction = function(formType, prefix, id, action) 
{ 
    var form = $(prefix + formType + id); 
    form.action = form.action.replace(/(?:up|down|clear)vote/, action + "vote"); 
}; 

VoteHijacker.updateScore = function(prefix, id, score) 
{ 
    var scoreElement = $(prefix + "score" + id); 
    scoreElement.innerHTML = score.score + " point" + VoteHijacker.pluralize(score.score); 
    scoreElement.title = "after " + score.num_votes + " vote" + VoteHijacker.pluralize(score.num_votes); 
}; 

VoteHijacker.pluralize = function(value) 
{ 
    if (value != 1) 
    { 
    return "s"; 
    } 
    return ""; 
};

그리고 코드 :

<html lang="en"> 
<head> 
    <link rel="stylesheet" href="/media/css/base.css" type="text/css" /> 
    <script src="/media/js/prototype.js"></script> 
    <script src="/media/js/getcookie.js"></script> 
    <script src="/media/js/prototype.extend.js"></script> 
    <script src="/media/js/votehijaker.js"></script> 

    <script src="/media/js/jquery-1.8.3.js"></script> 
    <script type="text/javascript" charset="utf-8"> 
     (function($){ 
     $.fn.bindPostCommentHandler = function() { 
      // We get passed a list of forms; iterate and get a unique id for each 
      // attach a submit trigger to handle saving and returning 
      this.each(function() { 
      //$(this).find('input.submit-preview').remove(); 
      $(this).submit(function() { 
       commentform = this; 
       commentwrap = $(this).parent(); 
       $.ajax({ 
        type: "POST", 
        data: $(commentform).serialize(), 
        url: "/comments/post/", 
        cache: false, 
        dataType: "html", 
        success: function(html, textStatus) { 
         // Extract the form from the returned html 
         postedcomment = $(html).find('#newly_posted_comment'); 
         //alert(html); 
         $(commentform).replaceWith(postedcomment.html()); 
         $(commentwrap).hide(); 
         $(commentwrap).slideDown(600); 
         $(commentwrap).find('.comment-form form').bindPostCommentHandler(); 
        }, 
        error: function (XMLHttpRequest, textStatus, errorThrown) { 
         $(commentform).replaceWith('Your comment was unable to be posted at this time. We apologise for the inconvenience.'); 
        } 
       }); 
       return false; 
      }); 
      }); //each 
     }; 
     })(jQuery); 

     $(function() { 
      $('.comment-form form').bindPostCommentHandler(); 
     }); 
    </script> 


</head> 
<body> 
    ... 
    ... 
    <script type="text/javascript"> 
    Event.observe(window, "load", function() 
    { 
     new VoteHijacker("link"); 
    }); 
    </script> 
    ... 
    ...

, votehijaker.js "()는 VoteHijaker"의 코드는 다음과 이 두 Ajax 요청을 함께 작동시키는 방법에 대한 단서?

최고 감사합니다,

출처

2012-12-03 André

당신은 어떤 분쟁 모드를 사용하고 있습니까? –

코드가 "충돌 없음"을 사용하고 있는지 잘 모릅니다. 나는 그것을 알 수 있니? 감사. –