使用ajax响应中的变量作为json

时间:2022-10-09 07:27:42

Im still newbie from ajax and Jquery, I will show my data base in graphic using c3.js, but I cant use my ajax response to javascript variable. This is my JSON response from response.php

我仍然是来自ajax和Jquery的新手,我将使用c3.js在图形中显示我的数据库,但我不能使用我的ajax响应javascript变量。这是来自response.php的我的JSON响应

[{"time":"2014-05-20 17:25:00","sensor1":"25","sensor2":"20","sensor3":"31","sensor4":"33","sensor5":"27"},{"time":"2014-05-20 17:26:00","sensor1":"26","sensor2":"23","sensor3":"33","sensor4":"31","sensor5":"23"}]

and this is my response.php

这是我的回复.php

<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "perkebunan";

//Connect to MySQL Server
$server = mysql_connect($dbhost, $dbuser, $dbpass);

//Select Database
mysql_select_db($dbname, $server) or die(mysql_error());
//build query
$query = "SELECT * FROM sensor";    
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());
$results = array();
while($row = mysql_fetch_assoc($qry_result))
{
    $temp = array(
        'time' => $row['time'],
        'sensor1' => $row['sensor1'],
        'sensor2' => $row['sensor2'],
        'sensor3' => $row['sensor3'],
        'sensor4' => $row['sensor4'],
        'sensor5' => $row['sensor5']
    );
    array_push($results,$temp);
}
echo json_encode($results);
?>

and this is my database

这是我的数据库

my database

我的数据库

so please help me to make my json response to varible in javascript. this my trial index.php to make it posible.

所以请帮助我在javascript中使我的json响应变量。这是我的试验index.php,使其成为可能的。

<html>
<head>
    <!-- Load c3.css -->
    <link href="c3/c3.css" rel="stylesheet" type="text/css">
    <!-- Load d3.js and c3.js -->
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="c3/c3.js"></script>
    <script src="jquery-2.2.3.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
    <div id="chart"></div>
<script language="javascript" type="text/javascript">  
function graphAjax(){
    var response;
     $.ajax({
        type : 'POST',
        url : 'ajax-example.php',
        dataType : 'json',
        data: { },
        success: function(data){
            response=data;
        }
    });
    var chart = c3.generate({
    bindto: '#chart',
    data: {
        json: {response
            /* I hope this variable response give result like this
            time: [2014-05-20 17:25:00, 2014-05-20 17:26:00, 2014-05-20 17:27:00, 2014-05-20 17:28:00, 2014-05-20 17:29:00],
            sensor1: [25, 26, 27, 28, 29],
            sensor2: [20, 23, 22, 25, 28],
            sensor3: [31, 33, 35, 30, 33],
            sensor4: [33, 31, 28, 25, 27],
            sensor5: [27, 23, 21, 19, 18],
            */
        }
    }
    });
}
</script>

   <input type='button' onclick='graphAjax()' value='Start'/>
</body>
<footer>
</footer>
</html>

thank you for your time and help.

谢谢你的时间和帮助。

1 个解决方案

#1


0  

Since AJAX works asyncronously you need some kind of work-around. For instance, you can move the function that generates your chart inside the success callback function (and define what happens in case of an error adding

由于AJAX异步工作,您需要某种解决方法。例如,您可以在成功回调函数中移动生成图表的函数(并定义在添加错误的情况下会发生什么

success: function(data){
            response=data;
            // generate chart here
        },
 error: function () {
            // do something
        },

Check also this extensive answer to How do I return the response from an asynchronous call?) or How to get the ajax response from success and assign it in a variable using jQuery?.

还要检查如何从异步调用返回响应的广泛答案?)或如何从成功中获取ajax响应并使用jQuery将其分配给变量?

#1


0  

Since AJAX works asyncronously you need some kind of work-around. For instance, you can move the function that generates your chart inside the success callback function (and define what happens in case of an error adding

由于AJAX异步工作,您需要某种解决方法。例如,您可以在成功回调函数中移动生成图表的函数(并定义在添加错误的情况下会发生什么

success: function(data){
            response=data;
            // generate chart here
        },
 error: function () {
            // do something
        },

Check also this extensive answer to How do I return the response from an asynchronous call?) or How to get the ajax response from success and assign it in a variable using jQuery?.

还要检查如何从异步调用返回响应的广泛答案?)或如何从成功中获取ajax响应并使用jQuery将其分配给变量?