更改数据而不刷新页面 - Change Data Without Refreshing Page

Change Data Without Refreshing Page

本文关键字：刷新数据 | 更新日期: 2023-09-27

所以我有一个个人资料页面，有一个状态更新/墙，我在页面上有有限的"关于"信息，我有文字说"更多关于我…"，我想把它变成一个链接，点击后，隐藏"墙"并用"关于"的信息替换它。我不知道如何做到这一点，我尝试了一些JavaScript方法，但它们根本不起作用。

几天来，我一直在努力做到这一点。任何帮助都会很棒！

$("#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>

您可以使用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>

JQUERY AJAX

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

您可以进行纯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>