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

Display chart after form submit via AJAX

本文关键字：显示图 表单 AJAX 提交 通过      更新时间：2023-09-26

我需要显示一个报告，其中包含来自服务器的一些数据，这还包括一个图表。我试图发送json数据使用$。getJSON一旦表单已经提交，但由于某种原因，我甚至不能回送$_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代码
   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);
    });
  }

您只能执行POST请求或GET请求，而不是同时执行这两个请求，因此不要在检查POST请求是否完成的函数中返回GET变量的内容:

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调用，仅仅返回提交表单的第一次调用中的数据有什么意义?

相关文章：