導航欄使用Ajax onclick

Question

我想使用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

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

<?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而不是body。

Answer 1

這似乎是一個非常基本的問題，但這是我如何理解您的問題

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

Answer 2

因此，您想在div中顯示數據。 您可以創建一個div元素

<div id='wrapper-ajax'></div>

然后在您的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
        });
    });

Answer 3

我已經向iam發出了Aamx新消息；）

非常感謝您與這段代碼完美配合

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

由於stackoverflow，php仍然完好無損！

導航欄使用Ajax onclick

問題描述

3 個解決方案

解決方案1
2 已采納 2018-03-10 13:48:38

解決方案2
0 2018-03-10 13:47:29

解決方案3
0 2018-03-10 14:09:55

導航欄使用Ajax onclick

問題描述

3 個解決方案

解決方案1 2 已采納 2018-03-10 13:48:38

解決方案2 0 2018-03-10 13:47:29

解決方案3 0 2018-03-10 14:09:55

解決方案1
2 已采納 2018-03-10 13:48:38

解決方案2
0 2018-03-10 13:47:29

解決方案3
0 2018-03-10 14:09:55