jquery 如何使用 AJAX 加载外部页面

3xiyfsfu  于 2023-08-04  发布在  jQuery
关注(0)|答案(4)|浏览(141)

我有一个链接按钮,应该链接到另一个页面。该页的内容应显示到当前页。我使用的是bootstrap框架,但是我创建的函数似乎不起作用。
这是我代码;

<a href="" id="reslink">link1</a>

<div class="span8" id="maincont"></div>

字符串
JavaScript;

$('#reslink').click(function(){
    $.ajax({
        type: "GET",
        url: "sample.html",
        data: { },
        success: function(data){
            $('#maincont').html(data);
        }
    });

});

8wigbo56

8wigbo561#

你有以下方法。

第一次

使用html如下。

<a href="Javascript:void(0);" id="reslink">link1</a>

字符串
Javascript:void(0);的工作方式是从脚本返回false。

第二次

不要改变html代码中的任何内容,但在jQuery代码中进行以下更改。

$('#reslink').click(function(e){
    e.preventDefault();
    $.ajax({
        type: "GET",
        url: "sample.html",
        data: { },
        success: function(data){
            $('#maincont').html(data);
        }
    });
});


e.preventDefault();防止HTML的默认行为,以便您可以执行代码。

um6iljoc

um6iljoc2#

也许load()会是你更好的选择?

$("#reslink").click(function() {
    $("#maincont").load("sample.html");
});

字符串
请注意,以这种方式加载内容可能会破坏历史记录和收藏夹。

mqkwyuun

mqkwyuun3#

body onload="abc()"在加载的页面应该工作时,从 AJAX 呈现。

w1jd8yoj

w1jd8yoj4#

上述方法对我都不起作用。对我很有效。

$(document).ready(function() {
    $(document).on('click', 'a', function(e) {
        e.preventDefault();
        //ajax load page
        $.ajax({
            url: $(this).attr('href'),
            type: 'GET',
            dataType: 'html',
            data: {
                type: 'ajax'
            },
            success: function(data) {
                //find body and replace
                $('#content').html(data);
                setStyle();
            },
            error: function(data) {
                console.log(data);
            }
        });
    });
});

字符串
请注意,您不应该在此发送整个HTML。您只需要指出应该在何处更改主体。
将此代码放在head部分
Example

相关问题