jQuery load() function doesn't work

前端 未结 3 854
失恋的感觉
失恋的感觉 2021-01-17 01:48

I am new to the world of JavaScript and I\'m trying to use the function load() to insert another html file. It\' a little bit hard to explain, here is the code:



        
相关标签:
3条回答
  • 2021-01-17 01:48

    You can find error message in load(url,fnResponse) response is success or fail

    also check this jquery-load-method

    $(document).ready(function() {  
            $('#main').click(
                function(){             
                    $('#news').load('today.html', function( response, status, xhr ) {
                        if ( status == "error" ) {
                            alert( "Sorry but there was an error: " + xhr.status + " " + xhr.statusText );
                        }
                    });          
                }   
            ); //end click       
    }); //end ready 
    
    0 讨论(0)
  • 2021-01-17 01:51

    Why it Doesn't Work

    Browser security restrictions can block you from using AJAX functions with content that is accessed through the file:// protocol (i.e. from a local file on your computer, without a web server).

    Solution

    I run a web server on my pc so that I can avoid all of these problems - back when I was working on a Windows PC, I used WAMP. These days, I use Linux (with Apache, PHP and MySQL) on my computer so I can work in an environment that is closer to the server.

    0 讨论(0)
  • 2021-01-17 02:03

    I do not believe the code you have presented has any faults in any way. I believe it is to do with your loading of the JQuery library, as with the following code I achieved these results:

    index.html

    <html>
        <head>
            <script src="jquery.js"></script>
            <script> 
                $(document).ready(function() {  
                    $('#main').click(
                        function(){             
                            $('#news').load('news.html');          
                        }   
                    ); //end click       
                }); //end ready 
            </script>
        </head>
        <body>
            <p id="main">HELLO</p>
            <p id="news">NEWS</p>
        </body>
    </html>
    

    news.html

    <html>
        <head></head>
        <body><h1>HELLO STACK OVERFLOW!!!</h1></body>
    </html>
    

    Before click:

    enter image description here

    After click:

    enter image description here

    However, when I was building this example I first tried using the Google APIs version of JQuery and found that I could not currently connect to the API. Therefore I believe the solution to your problem is to go to this website: http://code.jquery.com/jquery-1.11.1.js and copy and paste everything into a text file called 'jquery.js'. Then add the following to the head tag of your main HTML file:

    <script src="jquery.js"></script>
    

    Make sure that 'jquery.js' is in the same directory as the main HTML file of your project otherwise this will not work. Hope this helps :)

    0 讨论(0)
提交回复
热议问题