如何将多个数据从PHP传递到jQuery / AJAX?

时间:2012-03-26 19:34:54

标签: javascript php ajax getjson

我有一个主要的课程选择列表,可以驱动页面上的各种内容。选择课程后,其他选择列表将重新填充该课程的开始日期,最多提前6个月。此外,我在页面上有一个表格,上面有学生姓名和电话号码,当选择一门课程时,该表格将重新填充所有注册该课程的学生。我的问题是我将从PHP通过JSON获得各种不同的东西,即学生和开始日期。因此,我怎样才能将不止一件事传递给jQuery?如果课程选择列表不仅影响2件事,而且影响3件,5件甚至10件,该怎么办?我们如何使用PHP和jQuery处理它?<​​/ p>

foreach($m as $meta)
{
        $metaCourse = $this->getCourseInfo($meta['parent_course']);

        //populate the select list with the name of each course
        $metaSelectList .= '<option id="select'.$count.'" value="'.$metaCourse['id'].'">'.$metaCourse['fullname'].'</option>';
        $count++;

        //get only the first course's dates
        if($count3 == 1)
        {
                $startDate =  intval( $course->getStartDate(50) );
                $endDate =  strtotime('+6 month', $startDate);

                //populates the select list with the starting date of the course up to the next six months
                for($date = $startDate; $date <= $endDate ; $date = strtotime('+1 day', $date))
                {
                        $dateSelectList .= '<option id="select'.$count2.'" value="'.$date.'">'.date('D d F Y', $date).'</option>';
                        $count2++;
                }
                $count3++;
                $students = $s->getStudents($metaCourse['id']);
                $content = $this->createStudentTable($students);

        }
}

这是我的AJAX处理程序...现在(我还没有实现学生表,因为我还在试图弄清楚如何将多个数据传递给jQuery)。基本上每次选择课程时,PHP都会创建一个包含适当日期的新选择列表,然后将其传递给jQuery。我不确定我是应该用JavaScript还是PHP来做这件事。

if (isset($_GET['pid']) && (isset($_GET['ajax']) && $_GET['ajax'] == "true"))//this is for lesson select list
{
        $pid = intval( $_GET['pid'] );
        $c = new CourseCreator();
        $startDate =  intval( $c->getStartDate($pid) );
        $endDate =  strtotime('+6 month', $startDate);
        $dateSelectList = '<select name="dateSelect" id="dateSelect">';

        //populates the select list with the starting date of the course up to the next six months
        for($date = $startDate; $date <= $endDate ; $date = strtotime('+1 day', $date))
        {
                $dateSelectList .= '<option id="select'.$count2.'" value="'.$date.'">'.date('D d F Y', $date).'</option>';
                $count2++;
        }

        $dateSelectList .= '</select>';

        echo json_encode($dateSelectList);
        exit;
}

我的jQuery处理程序:

$('#metaSelect').live('change', function()
{
    $.getJSON('?ajax=true&pid='+$('#metaSelect').val(), function(data)
    {           
        alert(data);
        $('#dateSelectDiv').html(data);
    }); 

});  

1 个答案:

答案 0 :(得分:1)

您可以通过JSON轻松地将大量数据从PHP传递到HTML(您似乎已将其放入基本版本)

然而,要扩展你所拥有的东西 - 这是一个快速的例子

<?php
   $arrayOfStuff = array("theKey" => "theEntry", 123 => "Bob Dow", 56 => "Charlie Bronw", 20 => 'Monkey!', "theMyID" => $_POST['myID']);
   echo json_encode($arrayOfStuff);
?>

在HTML端。

<script> 
   $.post("/theurl/", {type: "fetchArrayOfStuff", myID: 24}, function(success) {
       //your success object will look like this
       /*
          {
             theKey: 'theEntry',
             123: 'Bob Dow',
             56:  'Charlie Bronw',
             20:  'Monkey!',
             theMyID: 24
          }
       so you can easily access any of the data.
                  alert(success.theKey);
                  alert(success[123]);
                  alert(success[56]);
                  alert(success[20]);
                  alert(success.theMyID);

       */

       //we can iterate through the success JSON!           
       for(var x in success) { 
           alert(x + "::" + success[x]);
       };
   }, "json");
</script>

从长远来看 - 你最好让后端做后端工作,前端做前端工作。

这意味着,尝试尽可能远离后端保持HTML生成,所以不要经常传递

    for($date = $startDate; $date <= $endDate ; $date = strtotime('+1 day', $date))
    {
            $dateSelectList .= '<option id="select'.$count2.'" value="'.$date.'">'.date('D d F Y', $date).'</option>';
            $count2++;
    }

你可能

    $date = $startDate;
    $myJson = array()
    while($date <= $endDate) {
        $myJson[] = array("date" => $date, "formattedDate" => date('D d F Y', $date));
        $date += 86400; //86400 is the value of 1 day.
    }
    echo json_encode($myJson);

您可以对HTML代码进行简单的迭代。

<script> 
   $.get("/", {ajax: true, pid: $('#metaSelect').val()}, function(success) {


       //we can iterate through the success JSON!           
       var _dom = $('#dateSelectDiv').html(''); //just to clear it out.

       for(var x in success) { 
          _dom.append("<option value='"+success[x].date+"'>"+success[x].formattedDate+"</option>");
       };
   }, "json");
 </script>

正如您所看到的 - 您可以使用JSON传递大量数据

或许查看一些文档 - http://api.jquery.com/jQuery.get/http://api.jquery.com/jQuery.post/ - 可能会给你更多的想法。

祝你好运