导航栏使用Ajax onclick
[英]Navigation bar onclick with Ajax
问题描述
I would like to redirect a content with a PHP function: 
我想使用PHP函数重定向内容：
<div>$content</div>
in case of condition on my navbar 如果我的导航栏上有状况
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style=color:blue;> Information <span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="uniqueId01">Submenu_1</li>
<li id="uniqueId02">Submenu_2</li>
<li id="uniqueId03">Submenu_3</li>
</ul>
</li>`
I am trying with this navbar.php and bellow phpfunc.php 我正在尝试使用此navbar.php和波纹管phpfunc.php
navbar.php navbar.php
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="container">
<h3 style=color:blue;>INFORMATION </h3>
<ul class="nav nav-pills" style="background-color:lightblue" >
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style=color:blue;> Information <span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="uniqueId01">Submenu_1</li>
<li id="uniqueId02">Submenu_2</li>
<li id="uniqueId03">Submenu_3</li>
</ul>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$('.dropdown-menu li').on('click', function(){
$.get('phpfunc.php', { menu: this.id }, function(data){
$('body').append(data); //do something with whatever data is returned
});
});
</script>
</body>
</html>
phpfunc.php phpfunc.php
<?php
switch($_GET['menu']){
case 'uniqueId01':
menu1();
break;
case 'uniqueId02':
menu2();
break;
case 'uniqueId03':
menu3();
break;
default:
someDefaultFunction();
break;
}
function menu1(){
include 'home.php'; //do something
}
function menu2(){
include 'user.php';
}
function menu3(){
echo 'You clicked Menu 3! ';
}
?>
The problem is: the Ajax script returns each value glued to next choice value. 问题是：Ajax脚本返回粘贴到下一个选择值的每个值。 I would like to return a value and delete the other value by new to display pages. 我想返回一个值并通过新建删除其他值以显示页面。
I would also like this function to return into the div and not the body. 我也希望此函数返回div而不是body。
3 个解决方案
解决方案1
2 已采纳 2018-03-10 13:48:38
This seems to be a very basic question, but here is how I understand your problem 这似乎是一个非常基本的问题，但这是我如何理解您的问题
Use the $('#myelementID').html('text') function, to overwrite the current content of the element. 使用$('#myelementID').html('text')函数覆盖该元素的当前内容。
<div id="myPageDisplay"> Content goes here!</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$('.dropdown-menu li').on('click', function(){
$.get('phpfunc.php', { menu: this.id }, function(data){
$('#myPageDisplay').html(data); // inject HTML into above DIV,
});
});
</script>
解决方案2
0 2018-03-10 13:47:29
So you want to show your data inside a div . 因此，您想在div中显示数据。 You can create a div element 您可以创建一个div元素
<div id='wrapper-ajax'></div>
Then in your js Code try something like this: 然后在您的js代码中尝试以下操作：
$('.dropdown-menu li').on('click', function(){
$.get('phpfunc.php', { menu: this.id }, function(data){
$('#wrapper-ajax').html(data); //do something with whatever data is
returned
});
});
解决方案3
0 2018-03-10 14:09:55
i have signaled iam new in Ajax ;) 我已经向iam发出了Aamx新消息；）
many thanks to you thant work perfectly with this code 非常感谢您与这段代码完美配合
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="container">
<h3 style=color:blue;>INFORMATION </h3>
<ul class="nav nav-pills" style="background-color:lightblue" >
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" style=color:blue;> Information <span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="uniqueId01">Submenu_1</li>
<li id="uniqueId02">Submenu_2</li>
<li id="uniqueId03">Submenu_3</li>
</ul>
</li>
</ul>
</div>
<div id="myPageDisplay"> Content goes here!</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$('.dropdown-menu li').on('click', function(){
$.get('phpfunc.php', { menu: this.id }, function(data){
$('#myPageDisplay').html(data); // inject HTML into above DIV,
});
});
</script>
</body>
</html>
the php is still intact, thanks to stackoverflow ! 由于stackoverflow，php仍然完好无损！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.