Jquery 如何使用Ajax将内容加载到目标Div中

我想把我所有的链接都加载到我尝试过的

div中。我想我很难做到这一点，因为要加载到目标
div
中的链接有
id
或
class

我想将内容加载到的
div
是
div#Pages
和链接-
a
标签-在我的导航中有
three-d
类名，如何将链接加载到
div#Pages

我使用的是引导框架

<div class="col-md-3" id="myContent" style="background-color: white; padding: 5px 10px; opacity:.5; height:100% !important; border-left-color:black; border-left-width:15px;">
    <div class="container-fluid">
    The content in this div will hide and<br> show (toggle) when the toggle is pressed. 
    <br><Br><br><br><br><br>
    <hr>Put Advertisement in this space here<br><br><br><br>Put Copyright Claims here<br>
    </div>
</div>

<div id="container-fluid">
    <div id="pages">
        <center>PUT ALL FONT ON HERE THERE YEAH</center>
    </div>
</div>  

<nav class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
        <div class="row">
            <div class="col-sm-1 col-md-1">
            <center><a href="javascript:toggleDiv('myContent');"> <img src="images/equalize_lq.gif" width="100" height="49"> <br><font size=".5em">Show Player</font></a></center>
            </div>

            <div class="col-sm-9 col-md-9">
            <ul class="block-menu" id="navmenu">
                <li>
                    <a href="/" class="three-d">Home
                    <span aria-hidden="true" class="three-d-box">
                        <span class="front">Home</span>
                        <span class="back">Home</span>
                    </span>
                    </a>
                </li>
                <li>
                    <a href="/demos" class="three-d">Artist
                    <span aria-hidden="true" class="three-d-box">
                        <span class="front">Roster</span>
                        <span class="back">Roster</span>
                    </span>
                    </a>
                </li>

                <li>
                    <a href="pages/order.html" class="three-d">Labels
                    <span aria-hidden="true" class="three-d-box">
                        <span class="front">Labels</span>
                        <span class="back">Labels</span>
                    </span>
                    </a>
                </li>
                <li>
                    <a href="/" class="three-d">Music
                    <span aria-hidden="true" class="three-d-box">
                        <span class="front">Music</span>
                        <span class="back">Music</span>
                    </span>
                    </a>
                </li>
                <li>
                    <a href="/" class="three-d">Videos
                        <span aria-hidden="true" class="three-d-box">
                            <span class="front">Videos</span>
                            <span class="back">Videos</span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="/" class="three-d">Store
                        <span aria-hidden="true" class="three-d-box">
                            <span class="front">Store</span>
                            <span class="back">Store</span>
                        </span>
                    </a>
                </li>
                <li>
                    <a href="/" class="three-d">Services
                        <span aria-hidden="true" class="three-d-box">
                            <span class="front">Services</span>
                            <span class="back">Services</span>
                        </span>
                    </a>
                </li>
            </ul>
        </div>

        <div class="col-sm-2 col-md-2"> SOCIAL MEDIA LINKS HERE</div>

        </div>
    </div>
</nav>

您可以按如下方式发送和接收AJAX调用

 $.get("http://URL/ACTIONNAME?PARA1="+para1+"&"+"PARA2="+para2,function(data){
                        $("#Pages").html(data);
                    });

我想您会使用jQuery来实现它

//handle 'click' on any <a class="three-d" /> element
$("body").on("click", "a.three-d", function (e) {
    //get URL from link
    var url = $(this).prop("href");

    //load http content into main div.
    $("#pages").load(url);

    //prevent link to be redirected
    e.preventDefault();
})

//处理“单击”任何元素
$（“正文”）。在（“点击”，“a.three-d”，功能（e）{
//从链接获取URL
var url=$（this.prop（“href”）；
//将http内容加载到主div中。
$（“#页面”）.load（url）；
//防止链接被重定向
e、 预防默认值（）；
})

试着像上面那样写
通过使用Id或div的名称
您尝试过的一些代码，我们可能会帮助您，让我们在这里帮助您。当然，我现在正在编辑帖子，我认为这会起作用，但它不是，我需要它按Id加载，而不是按类。链接上的类被分配给css，以便在悬停时为我的导航设置动画。。。。是的，我很可能会使用jQuery@thiagopxpNO，这仍然会跳转到页面而不是加载到div中。如果是这样的话，你希望在一个页面中包含两个html页面吗？如果是这样的话，我希望在div中尝试而不是在hrefNO中尝试。我不希望在一个页面中包含两个html页面。。。。。我只想导航加载一个页面点击到div？这变得非常令人沮丧，为什么不在ajax中单击链接$.ajax（{type:“POST”，url:pathname，data:data，success:function（data）{if（data.redirect）{window.location=data.redirectURL；}}时使用response redirect而不是href，
//handle 'click' on any <a class="three-d" /> element
$("body").on("click", "a.three-d", function (e) {
    //get URL from link
    var url = $(this).prop("href");

    //load http content into main div.
    $("#pages").load(url);

    //prevent link to be redirected
    e.preventDefault();
})

$(document).ready(function() {
    $('#button name/id').click(function() {
        $.ajax({
            url : '//controller name',
            data : { // all the data to be passed to fetch )},
            success : function(responseText) {
                var p="=Succesfull";
                if(p==responseText) {
                $('#name or id of div').text(responseText);
                 $('#submit2').show();
                }
                else {
                    $('#ajaxGetUserServletResponse1').text(responseText);
                }
            }
        });
    });