jQuery使用$ _GET </div>在<div>中加载AJAX内容

时间:2012-05-29 15:04:16

标签: php jquery ajax get load

假设我列出了一个包含以下链接的行列表:

content.php

/*DATABASE CONNECTION AND SQL STUFF*/

<div id='content'>

  <?php 

    $sql = mysql_query ("SELECT id, somedata FROM myTable");

    while ($row = mysql_fetch_assoc($sql)) {

    echo "<a href='?p=moreData&id=" . $row['id'] . "'>" . $somedata . "</a><br />\n";

    }

  ?>

</div>

moreData.php

<?php

  $id = $_GET['id'];

  /* SQL STUFF */

  echo "More information about" . " ". $somedata. " " . "wich has an id of" . " " . $id;

如何在文件moreData.php中名为<div id='ajaxContent'>的新div中使用content.php加载$ _GET信息,而不是加载新页面?

我已经阅读了一些有关jQuery加载的内容,但我对jQuery编码非常陌生,我自己无法弄清楚...

1 个答案:

答案 0 :(得分:1)

您需要将要通过GET发送的ID的javascript var rowId预设为moreData.php。我将它设置为标签的rel属性,并在处理click事件时获取它。

echo "<a class='ajaxCall' rel='" . $row['id'] . "' href='?p=moreData&id=" . $row['id'] . "'>" . $somedata . "</a><br />\n";

然后点击事件

$('a.ajaxCall').click(function() {
  var rowId = $(this).attr('rel');
}); 

并在同一事件中调用ajax

$.ajax({
  type: "get",
  url: '/moreData.php', // your uri to the moredata
  data: { id: rowId },
  success: function(data) { // data is the response of the ajax call
    $('#ajaxContent').html(data);
  }
}); 

你需要jQuery库。