通过AJAX提交表单后显示图表

时间:2013-06-17 19:48:38

标签: php javascript jquery json highcharts

我需要显示一个包含来自服务器的一些数据的报告,这还包括一个图表..我试图在表单已经提交后使用$ .getJSON发送json数据但由于某种原因我甚至无法回显out $ _GET [rep]以确保我收到正确的数据..下面是php代码,这里是js http://jsfiddle.net/f8rGb/2/

PHP代码

  if (isset($_POST["search"]) and $_POST["search"] == "go"){

     $name = $_POST['term'];

     $project = new Project();
     $pro = $project->get_project($name);  
     $serv = $project->get_project_service_by_id($pro);

     // DOING this to make sure i recieve the variable 
        // echo $_GET['rep'];

        if(isset($_GET['rep']))
        die(json_encode($serv)); 

     }

JS CODE

   function searchProjectsRep() {

   // TRIGGERING THIS FUNCTION IN THE ONSUBMIT EVENT OF THE FORM

   var datos = $('#formProjectsRepSearch').serialize();
   var uri = $('#formProjectsRepSearch').attr('action');
    $.ajax({
        url: uri,
        data: datos,
        type: 'POST',
        success: function(resp) {
            $('#ajaxProjectsRep').html(resp);
            projectChart();
        }
 });
 }

 // CHART FUNCTION

 function projectChart(){

 $.getJSON('controller.php?rep=1', function(data) { 

    options = {
      chart: {
        renderTo: 'chart_div',
        defaultSeriesType: 'pie'
    },
    title: {
        text: 'Datos de proyecto'
    },

    series: []
    };
       var statusCount = {},
       serie1 = [];

       data.forEach(function(e) {
       statusCount[e.status] = 1 + (statusCount[e.status] || 0);
    });

    $.each(statusCount, function(status, count) {
    serie1.push( [status, count] );
    });
    options.series.push({data: serie1});

    new Highcharts.Chart(options);

    });
  }

1 个答案:

答案 0 :(得分:0)

您只能同时执行POST请求或GET请求,因此请勿在函数内返回GET变量的内容检查POST请求是否已完成:

if ( isset($_POST["search"]) && trim( $_POST["search"] ) == "go" ){ 
    $name    = $_POST['term'];
    $project = new Project();
    $pro     = $project->get_project($name);  
    $serv    = $project->get_project_service_by_id($pro);
    exit;
}

if(isset($_GET['rep']))
    echo json_encode($serv); 
    exit;
}

另一方面,制作两个ajax调用的重点是什么,只返回表单提交的第一个数据?