如何使用jQuery和PHP动态显示更多信息?

时间:2011-11-26 15:31:01

标签: php jquery

我有来自MySQL的课程列表,当我点击课程时,它应该向右显示正确的课程描述,当我点击下一个课程时,前一个应该隐藏并获得当前的点击课程描述,这是代码我做了

的jQuery

$(document).ready(function() {
          $("#toggle_value").click(function(){
          $("$courseid").show("slow");         
        });
     });

PHP代码

$cour = get_records_sql('SELECT c.id, c.summary FROM mdl_course c');
echo '<table style="background:white;border:2px solid blue">';
foreach($cour as $cou) 
{
   $coursename = $cou->fullname;
   $summary = $cou->summary;                          
   echo '<tr style="border:1px solid #BACC82;">
            <td><div class="toggle_button"><a href="javascript:void(0);"   
                  id="toggle_value">'.$coursename.'</a></div></td></tr>
<div id="div1" style="display:none;top:440px; border:0px solid #000;float:right;background-color:white; padding:5px;">
}
echo '</table>';

2 个答案:

答案 0 :(得分:0)

你不能在jQuery中引用PHP变量 - jQuery是浏览器端而PHP是服务器端。

您可以更新点击功能以在点击时加载数据:

 $(document).ready(function() {
      $("#toggle_value").click(function(){
         $('#<target div>').load('<url of php file>', {courseid : ##});       
    });
 });

您放置在<url of php file>内的php文件会返回您单击的课程的数据。您传递的数据将在php中使用_POST['courseid']提供。您需要将课程ID添加到#toggle_value锚中 - 但您可以将其添加为任何属性。

以下是完整示例 - 未经测试,您将需要更新文件名和表格列等内容:

getAllCourses.php:

$courses = mysql_fetch_array(mysql_query('SELECT c.name,c.id FROM mdl_course c');
echo '<table>';
foreach($courses as $course) 
{                         
   echo '<tr><td><a href="#" rel="'. $course['id'] .'" class="toggle_value">'.$course['name'].'</a></td></tr>
}
echo '</table><div id="coursesummary"></div>';

getCourse.php:

$courseid = mysql_real_escape_string(_GET['courseid']);
$course = mysql_fetch_array(mysql_query('SELECT c.summary FROM mdl_course c where c.id = $courseid'));
echo $course['summary'];

JavaScript的:

$(document).ready(function() {
      $(".toggle_value").click(function(){
         $('#coursesummary').load('getCourse.php?courseid=' + $(this).attr('rel'));       
    });
 });

答案 1 :(得分:0)

由于我们不确切知道您的代码是什么,我们可以提出建议特定的解决方案。
但ManseUK给你一个适当的方式应该遵循。但是如果你想通过JQuery使用Ajax技术(我的意思是从服务器动态获取信息作为JSON数据),你可以check out this tuttorial.

即使有很多tuttorial on the web