Question

之前我问了一个关于如何将显示/隐藏功能添加到div并在单击链接时准确呈现它的问题。（The original question）我收到了一个使用jquery和ajax来做这个的答案。这是我收到的代码：

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>

我的microsofttranslator链接输出一些文本。我希望它只在有人点击显示/隐藏值链接时加载该URL。它必须只加载一次。我的意思是当有人点击它时，它会被渲染并显示，当他再次点击它时它会被隐藏，当他再次点击它时，它不会再次渲染它并从他第一次点击它时显示它。顺便说一下，我在页面上有很多div，所以每个id都需要是唯一的。

很抱歉这个问题很长。

由于

PS：如果api是在客户端完成的，那也不是问题。

Answer 1

试试这个：

<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>

Answer 2

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>

如何将ajax和jquery实现为html

2 个答案: