在不刷新頁面的情況下更改數據

Question

所以我有一個個人資料頁面，帶有狀態更新/牆，我在頁面上限制了“關於”信息，我有文字說“更多關於我......”我想把它變成一個鏈接，當點擊時，隱藏“牆”並將其替換為“關於”信息。 我不知道該怎么做，我嘗試了一些 JavaScript 方法，但它們甚至根本不起作用。

我已經嘗試使這項工作幾天了。 任何幫助都會很棒！

Answer 1

您可以進行純 js ajax 調用或更簡單的 jquery ajax 調用。

<div id="about"><h2>About.....</h2></div>

<button>Load more</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){

    $("#about").append("<div></div>"); //append a div inside hold the content to be loaded

    $("#about>div").load("url of file to be loaded"); // load the content into children div

    });
});
</script>

Answer 2

您可以使用 jQuery ajax。

HTML：

<div class="sidebar">
    <div class="wall">
        My Wall Content
    </div>
    <div class="about-us-more" style="display:none;">
        Initially hidden
    </div>
</div>
<div class="main">
    <button type="button" id="load-more-about-us">More Info</button>
</div>

查詢 AJAX

$("#load-more-about-us").click(function(){
    $.get("get_more_about_us.php", function(data, status){
        $(".wall").hide();
        $(".about-us-more").show();
    });
}); 

Answer 3

 $("#more_about_me").on('click', function () { $("#wall").hide(); $("#more_about_me").hide(); $("#about_text").show(); }); $("#less_about_me").on('click', function () { $("#wall").show(); $("#more_about_me").show(); $("#about_text").hide(); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="wall"> <h3>Wall</h3> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book </div> <h3>About Me</h3> Lorem Ipsum has been the industry's standard dummy text. <a href="javascript:;" id="more_about_me">More About me</a> <div id="about_text" style="display:none"> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. <a href="javascript:;" id="less_about_me">Less About me</a> </div>