JQuery에서 여러 개의 AJAX 호출을 개별적으로 수행하는 방법

Question

버튼을 사용하여 두 번의 AJAX 호출을 수행하려고합니다. Button1을 클릭하면 ProductsTable이 웹 서비스의 데이터를 보여줍니다. Button2를 클릭하면 OtherTable이 웹 서비스의 자체 데이터를 보여줍니다. 그러나 지금 당장 버튼 하나를 클릭하면 아무 것도 나타나지 않습니다. 나는 그 중 하나만 있다면 코드가 작동하고 .click 함수를 감싸고 있지 않다는 것을 안다.

오류 메시지가 없습니다. ASP.NET 4.0, JQuery 1.4.4. ScriptManager를 사용하지 않습니다. UpdatePanels를 사용하지 않습니다. 아래

코드 :

<script src="Scripts/jquery-1.4.4.js" type="text/javascript"></script> 
<script src="Scripts/jquery.tmpl.js" type="text/javascript"></script> 
<script id="ProductsTemplate" type="text/x-query-tmpl"> 
    <tables id="ProductsTemplate">    
     <thead> 
     </thead> 
     <tbody> 
      {{each d}} 
       {{tmpl($value) '#ProductsRowTemplate'}} 
      {{/each}} 
     </tbody>   
    </tables> 
</script> 
<script id="ProductsRowTemplate" type="text/x-query-tmpl"> 
    <tr> 
     <td>${title}</td> 
     <td>${size}</td> 
     <td>${price}</td> 
    </tr> 
</script> 
<script id="Products2Template" type="text/x-query-tmpl"> 
    <tables id="Products2Template">    
     <thead> 
     </thead> 
     <tbody> 
      {{each d}} 
       {{tmpl($value) '#Products2RowTemplate'}} 
      {{/each}} 
     </tbody>   
    </tables> 
</script> 
<script id="Products2RowTemplate" type="text/x-query-tmpl"> 
    <tr> 
     <td>${title}</td> 
     <td>${size}</td> 
     <td>${price}</td> 
    </tr> 
</script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#Button1").click(function() { 
      $.ajax({ 
       type: "POST", 
       url: "JSON-WebService.asmx/getProducts", 
       data: "{}", 
       contentType: "application/json; charset=UTF-8", 
       dataType: "json", 
       success: function (data) { 
        $('#ProductsTemplate').tmpl(data).appendTo('#ProductsTable'); 
        alert("Products works"); 
       }, 
       failure: function (data) { 
        alert("Products didn't work"); 
       } 
      }); 
     }); 

     $("#Button2").click(function() { 
      $.ajax({ 
       type: "POST", 
       url: "JSON-WebService.asmx/getProducts", 
       data: "{}", 
       contentType: "application/json; charset=UTF-8", 
       dataType: "json", 
       success: function (data) { 
        $('#Products2Template').tmpl(data).appendTo('#OthersTable'); 
        alert("Products2 works"); 
       }, 
       failure: function (data) { 
        alert("Products2 didn't work"); 
       } 
      }); 
     }); 

    }); 
</script> 
<title>Using JQuery</title> 

<form id="form1" runat="server"> 

<div id="ProductsTable"> 

</div> 

<div id="OthersTable"> 

</div> 

<div> 
    <asp:Button ID="Button1" runat="server" Text="Products" /> 
    <asp:Button ID="Button2" runat="server" Text="Products2" /> 
</div> 

</form> 

Answer 1

확인. ASP : Button이 ajax 호출 직후 포스트 백/재로드를 일으킨다는 것을 알았습니다. 그래서 아무 것도 추가되지 않은 것처럼 보입니다. , 난 당신이이 불을 지르고의 .NET 패널의 결과를 보거나 수, 백 엔드에 뭔가 문제가 있다고 생각

`<script type="text/javascript"> 
$(document).ready(function() { 
    $("#Button1").click(function (evt) { 
     evt.preventDefault(); 
     $.ajax({ 
      type: "POST", 
      url: "JSON-WebService.asmx/getProducts", 
      data: "{}", 
      contentType: "application/json; charset=UTF-8", 
      dataType: "json", 
      success: function (data) { 
       $('#ProductsTemplate').tmpl(data).appendTo('#ProductsTable'); 
       alert("Products works"); 
      }, 
      failure: function (data) { 
       alert("Products didn't work"); 
      } 
     }); 
    }); 
}); 
</script>` 

Answer 2

은 그것을 사용하는 내가

function jqajax(urlp,thediv) { 
      $.ajax({ 
      type: "GET", 
      url: urlp, 
      dataType: "html", 
      //data: "header=variable", 
      success: function(data){ 
       if($('#'+thediv)) 
       { 

        $("#"+thediv).html(data); 

       } 
       else 
       { 

        $("#"+thediv).parent().html(data); 
       } 
      } 
      }); 
} 

를 작성한 다음과 같은 기능을 사용 할 수 있습니다

의 onclick = "jqajax (yoururlhere, returnedhtml_div_here) ; "

Answer 3

내가 말한 것처럼 .net 패널을보고 클릭에 대한 결과가 나오는지 확인하십시오. 그들이 오면 HTML 코드에 버그가 있습니다.

바인딩을 제거하고 전체 내용을 경고하고 인쇄되는지 확인하십시오. 그러면 쉽게 인쇄 할 수 있습니다.

방화 광, .net 패널을 사용하면 쉽게 문제를 해결할 수 있습니다.