如何實現AJAX和jQuery到HTML

-1

我如何顯示/隱藏功能添加到一個div並使其點擊一個鏈接什麼時候問過的問題。（The original question）我收到了一個答案，一起使用jQuery和ajax來做到這一點。這裏是我收到的代碼：如何實現AJAX和jQuery到HTML

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>

我微軟轉換器鏈接輸出一些文本。我希望它只能在有人點擊顯示/隱藏值鏈接時加載該網址。它只能被加載一次。我的意思是當有人點擊它時，它會被渲染和顯示，當他再次點擊它時，它會被隱藏起來，當他再次點擊它時，它不會再次渲染它，並在第一次點擊它時顯示它。順便說一句，我有很多div在頁面上，所以每個id都需要是唯一的。

很抱歉的長期問題。

感謝

PS：如果API在客戶的身邊做了它不會是一個問題了。

來源

2012-02-17 user1215741

你不會用'javascript：unhide（'a'）'調用函數。你會使用'onclick =「取消隱藏（'a'）」'。 – j08691 2012-02-17 19:37:39

試試這個：

<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 2012-02-17 19:47:31

如果您查看JS控制檯（CTRL + SHIFT + J），它註冊了什麼錯誤？ – BenjaminRH 2012-02-17 19:51:29

它說$沒有被定義。第3行 – user1215741 2012-02-17 19:53:22

BAM！這裏有一個完整的工作示例（儘管我正在訪問Twitter API狀態頁面）。評論應該回答你所有的問題。您需要做的就是將錨標記中的鏈接更改爲您想要的鏈接。

<!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 2012-02-17 20:14:59

你使用什麼瀏覽器？你在Javascript控制檯中遇到什麼錯誤？ – Steve 2012-02-17 20:25:55

我將--https：//api.twitter.com/1/help/test.json--改爲--http：//api.microsofttranslator.com/V2/Ajax。svc/Translate？appId = 9CF5D9435A249BB484EC6DB50FFFB94C6733DEFB＆from = en＆to = de＆text = Hello--當我點擊鏈接並且JS控制檯什麼也沒有顯示時什麼都沒有發生。 – user1215741 2012-02-17 20:34:23

如何實現AJAX和jQuery到HTML

回答

相關問題