How can I use AJAX as an alternative to an iframe?

问题:

at the moment I am using iframes on my website to display content from other pages like forms. The problem I have, is on the login page, when the user logs in with a form inside an iframe, it just shows the next page inside the login iframe - which is completely useless.

I have heard that AJAX is much more flexible and dynamic for things like this, but I can't work out how to use it, I have looked at some tutorials but don't seem to be getting that far in displaying a page inside a page.

How can I replace my iframe with AJAX?

Thank in advance :)

回答1:

Since you won't be using iFrames you will need a container to put your page into. With AJAX, it is common practice to use a <div> element to hold that data. Also, jQuery or another Javascript library supporting AJAX will make your life easier with working tested code so you can focus on your business logic rather than the nitty gritty. So, in your HTML, you will need a container element:

<div id="otherpage"></div>

Then in an included javascript file, you can use this jQuery:

$(document).ready(function() {
   $('#otherpage').load('otherpage.html', function() {
      alert('Load was performed.');
   });
});

Of course, before using that, make sure you include jQuery as well. This tutorial should help you get started with jQuery.

回答2:

The issue you are facing is more related to ajax than any other thing.

Try to "pre-load" your js functions in the host html (not the one loaded via ajax) and just load the specific rendering html through ajax.

Then, use jquery ".done( function(data) { ... " method to invoque js functions you "pre-loaded" << (included in the base html/document) once they are ready to go.

Hope this help, Regards.

Try something like this:

    $(document).ready(function(){
        $.ajax(
            url    : './your_script.php',
            context: 'document',
        ).done(function(data){
            $('#your_div').html( data );
            your_js_function();
        })
    });

    // ---- main html
    function your_js_function(){
        alert('got it!');
    };