html로 아약스와 jquery를 구현하는 방법

-1

div에 show/hide 기능을 추가하는 방법에 대한 질문을하고 링크를 클릭 할 때 정확히 렌더링합니다. (The original question) jquery와 ajax를 함께 사용하여 답변했습니다. 내가받은 코드는 다음과 같습니다.html로 아약스와 jquery를 구현하는 방법

function unhide(){ 
    $('#id-of-showhide-div').css({'display','block'}); 
    $.ajax({ 
     url: 'http://api.microsofttranslator.com..', // your url to microsoft translator 
     success: function(data) { 
      $('#id-of-showhide-div').html(data); 
     } 
    }); 
}

이제부터 나는 이것을 사용하는 방법을 모릅니다. 이것은 내가 시도한 HTML이지만 작동하지 않습니다.

<script type="text/javascript"> 
function unhide(){ 
    $('#id-of-showhide-div').css({'display','block'}); 
    $.ajax({ 
     url: 'api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=SOMETHING&from=en&to=de&text=Hello', // your url to microsoft translator 
     success: function(data) { 
      $('#id-of-showhide-div').html(data); 
     } 
    }); 
} 
</script> 

<a href="javascript:unhide('a');">Show/Hide Value</a> 
<div id="a">javascript:unhide('a');</div>

I microsofttranslator 링크는 일부 텍스트를 출력합니다. 누군가가 Show/Hide 값 링크를 클릭 할 때만 해당 URL을로드하기를 원합니다. 그리고 한 번만로드해야합니다. 나는 누군가가 그것을 클릭하면 렌더링되고 보여지고, 다시 클릭하면 숨겨지고 다시 한 번 클릭하면 다시 렌더링되지 않고 처음 클릭했을 때부터 보여지는 것을 의미합니다. 그런데 페이지마다 많은 div가 있으므로 모든 ID는 고유해야합니다.

대단히 죄송합니다.

감사

PS : API가 클라이언트 측에서 수행되는 경우도 문제가되지 않습니다.

출처

2012-02-17 user1215741

당신은'javascript : unhide ('a')'함수를 호출하지 않을 것입니다. 'onclick = "unhide ('a')"'를 사용합니다. – j08691

이 시도 :

<script type="text/javascript"> 
    function toggleDiv(id){ 
     if ($('#' + id).html() == '') { 
      $.ajax({ 
       url: 'api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=SOMETHING&from=en&to=de&text=Hello', // your url to microsoft translator 
       success: function(data) { 
        $('#' + id).html(data); 
       }, 
       error: function() { 
        $('#' + id).html('The resource could not be loaded'); 
       } 
      }); 
     } 

     $('#' + id).toggle(); // Toggle div visibility 
    } 
</script> 

<a href="#" onclick="toggleDiv('a')">Show/Hide Value</a> 
<div id="a" style="display:none"></div>

출처

2012-02-17 19:37:19 BenjaminRH

작동하지 않습니다. 표시/숨기기 값을 클릭하면 아무 것도 나타나지 않습니다. – user1215741

JS 콘솔 (CTRL + SHIFT + J)을 보면 어떤 오류가 등록됩니까? – BenjaminRH

$가 정의되어 있지 않습니다. 3 호선 – user1215741

BAM을! 여기에 당신을위한 완벽한 예제가 있습니다 (비록 Twitter API Status 페이지를 치고 있습니다). 의견은 모든 질문에 답변해야합니다. 앵커 태그의 링크를 원하는 링크로 변경하기 만하면됩니다.

<!doctype html> 
<html> 
    <head> 
     <title>My Rockin' Answer</title> 

     <style type="text/css"> 
      #contents{ 
       margin-top:20px; 
       border:1px solid #FF0000; 
       display:none; 
      } 
     </style> 

    </head> 
    <body> 

     <a href="https://api.twitter.com/1/help/test.json" 
      title="Show/Hide" class="show" id='link'>Show Twitter API Status</a> 

     <!-- Here is the DIV that we're putting the ajax content into --> 
     <!-- Notice that it's hidden above in the CSS --> 
     <div id="contents"></div> 

     <!-- Include jQuery from the jQuery CDN --> 
     <!-- Always put your Javascript at the end of the file because it --> 
     <!-- may prevent some of the other content from loading while it's --> 
     <!-- fetching the javascript from the CDN --> 
     <script src='http://code.jquery.com/jquery-latest.min.js'></script> 
     <script type='text/javascript'> 

      // This waits until the document is completely done loading 
      $(document).ready(function(){ 

      // The code inside this function gets 
      // called when the user clicks the link 
      $('#link').click(function(e){ 

       // This prevents the link from going to it's href 
       // If we don't have this, none of the following 
       // javascript will be executed 
       e.preventDefault(); 

       // Check to see if we're displaying the ajax content... 
       if($(this).hasClass('show')){ 

        // Since we're not showing the ajax content, grab it 
        $.ajax({ 
         url  : $(this).attr('href'), // Use the value we have in the href attribute 
         success : function(response){ // Execute the code in here when we successfully get the content back 
          $('#link').removeClass('show').addClass('hide'); // Indicate that we are showing the ajax content 
          $('#link').html('Hide Twitter API Status');  // Change the link's text 
          $('#contents').html(response);     // Append the ajax content into our hidden div 
          $('#contents').show();       // Show the hidden div 
         } 
        }); 

       } else { 
        // We are already showing the ajax content so... 

        // Indicate that we are no longer showing the ajax content 
        $(this).removeClass('hide').addClass('show'); 

        // Change the link text 
        $(this).html('Show Twitter API Status');   

        // Hide the ajax content 
        $('#contents').hide(); 
       } 
      }); 
      }); 
     </script> 
    </body> 
</html>

출처

2012-02-17 19:59:52 Steve

나는 이것을 스티브에게 줄 수 없었다. – user1215741

어떤 브라우저를 사용하십니까? 그리고 Javascript 콘솔에 어떤 오류가 있습니까? – Steve

--https : //api.twitter.com/1/help/test.json--을 -http : //api.microsofttranslator.com/V2/Ajax로 변경했습니다.svc/Translate? appId = 9CF5D9435A249BB484EC6DB50FFFB94C6733DEFB & from = en & to = de & text = 안녕하세요 - 링크를 클릭하면 아무 것도 나타나지 않고 JS Console에 아무것도 표시되지 않습니다. – user1215741

html로 아약스와 jquery를 구현하는 방법

답변

관련 문제