php - 使用 jquery/ajax 加载 php 页面以打开特定链接以在 Div 中显示页面

Question

我有带有 id/name/desc 字段的 mysql 表。我使用 php 选择查询在 div 中显示它

<div class="show_name">
    while( $row = $data->fetch_array(MYSQLI_ASSOC))
    { ?>
        <div><?php echo $row['id'];?></div>
        <div><?php echo $row['name'];?></div>
    <?php } ?>
</div>
<div id="content"></div>

jquery/ajax代码

$('.show_name').on('click',function(){
    $('#content').load('name.php');
});

我有 name.php 页面，我想在其中显示点击名称链接的描述

for example
id name
1   abc
2   xyz

如果我点击 abc 名称链接，我应该能够打开带有 abc desc 的 name.php

如果我点击 xyz 名称链接，我应该能够打开与 xyz desc 相同的 name.php

等..

请提供任何帮助谢谢!

Answer 1

将类和用户定义的数据属性用于存储 id

// add clickMe class
// and add data-id attribute
<div class="clickMe" data-id="<?php echo $row['id'];?>"><?php echo $row['id'];?></div>
<div><?php echo $row['name'];?></div>

那么你的js代码应该是这样的:

// using on to delegate for dynamic element
$('.show_name').on('click','.clickMe', function(){
  // capture data id
  var id = $(this).data('id');
  // load name.php and pass post parameter(id)
  // we pass id paramater here
  // you can use success callback if want to populate anything
  $('#content').load('name.php', {id : id});
  // above code should display data from name.php
});

在您的 name.php 中应该有查询和 html 页面，如:

// this id we pass from load request earlier 
$myId = $_POST['id'];
// do your logic here
// query from database for details description using where id = '$myId'
// display the content here
// suppose you have data store inside $myData variable
$myData = getData();
echo $myData['name'];
echo $myData['desc'];