更改数据而不刷新页面

Question

所以我有一个配置文件页面，状态更新/墙，我有限的页面上的“关于”信息，我有文字说“更多关于我..”，我想转进入一个链接，点击时，隐藏“墙”并用“关于”信息替换它。我不知道如何做到这一点，我尝试了一些JavaScript方法，但他们甚至都没有工作。

我试图让这项工作几天。任何帮助将是伟大的！

Answer 1

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

Answer 2

你可以做一个纯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 3

您可以使用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(); 
    }); 
});