javascript - 使用 Ajax 导航栏 onclick

标签 javascript php jquery html ajax

我想使用 PHP 函数重定向内容:

<div>$content</div>

如果我的导航栏出现问题

<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>`

我正在尝试使用这个 navbar.php 和下面的 phpfunc.php

导航栏.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

<?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! ';
}


?>

问题是:Ajax 脚本返回的每个值都粘在下一个选择值上。我想返回一个值并通过新的显示页面删除另一个值。

我还希望这个函数返回到 div 而不是正文。

最佳答案

这似乎是一个非常基本的问题,但这是我如何理解你的问题

使用 $('#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>

关于javascript - 使用 Ajax 导航栏 onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49209694/

相关文章:

php - 从数组中提取信息

php - 移动到 mysqli,mysql_result

php - 通过 ajax 发送复选框值以进行 php/mysql 查询

javascript - 在 HTML 中显示 Jquery Ajax 响应时出现问题

javascript - Mouseenter 或 mouseover 阻止在 Backbone/Marionette 应用程序中触发点击

javascript - 如何计算从今天起30天后的日期

javascript - 为什么返回原始 JSON 对象而不是我的部分 View ?

javascript - window.location 第二次不起作用

php - 如何在 PHP 中获取 SOAP 帖子?

OS X 上的 PHP 调试 - 无望?