将数组从一个php页面传递到另一个javascript页面的最佳做法是什么?

时间:2015-11-04 20:23:35

标签: javascript php html json ajax

我使用AJAX向另一个php页面发送请求,返回查询结果。我通过xmlhttprequest将它调用到javascript以获取该php页面的内容,但因为我正在混合表示逻辑"例如。 echo blah blah"使用实际的代码逻辑,我想找到一种方法,我可以单独使用我的查询保留php逻辑,将结果存储在数组中,并通过ajax将其传递给我的js代码以在函数中使用。

我尝试使用此数组的内容填充下拉列表。我尝试过json编码,但我没有运气。

此处要求的php页面的代码:

<html>
<head>
</head>
<body>
<?php
ini_set('display_errors',1);
ini_set('display_startup_errors',1);
error_reporting(-1);


$con = mysqli_connect('*******','********','******','****');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

$j = mysqli_real_escape_string($con, $_GET['j']);

mysqli_select_db($con,"4h");
$sql="SELECT nombreClub FROM club4h WHERE oficinaLoc LIKE '%".$j."%'";
$result = mysqli_query($con,$sql);

while($row = $result->fetch_array()) {
    $response[] = $row;
}

file_put_contents('getnombre.php',json_encode($response));

mysqli_close($con);
?>
</body>
</html>

这是我的js功能:

function loadDoc(url, cfunc, sel){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){
        if (xhttp.readyState == 4 && xhttp.status == 200){
            cfunc(xhttp);
        }
    }
    xhttp.open("GET", url +sel, true);
    xhttp.send();
}

function selClub(xhttp) {
    document.getElementById("nombreClub").style.display = "inline";
    var optData = <?php file_get_contents('getnombre.php'); ?>;
    var newClub = document.getElementById("addClub");
    newClub.type = "text";
    document.getElementById("addOption").style.display = "inline";
            $("#addOption").click(function(){
            $("#nombreClub").append('<option value="' + $("#addClub").val() + '">' + $("#addClub").val() + '</option>');
            $("#nombreClub").last().focus;
            });
}

当用户单击上一个下拉列表时,我通过onchange事件调用它,以便使用特定于上一个列表的选项填充此下拉列表。我知道如何将选项添加到列表中,我只是无法将数据从php页面获取到js而无需执行以下操作:

$a = mysqli_real_escape_string($con, $_GET['a']);

mysqli_select_db($con,"4h");
$sql="SELECT nombre FROM personal4h WHERE unidadProg LIKE '%".$a."%'";
$result = mysqli_query($con,$sql);

echo '<select name="agenteExt" id="agenteExt">
    <option value="">Seleccione Agente</option>';
while($row = mysqli_fetch_array($result)) {
    echo "<option value =" . $row['nombre'] . ">" . htmlentities($row['nombre']) . "</option>";
}

echo "</select>";
mysqli_close($con);
?>

1 个答案:

答案 0 :(得分:1)

我会尝试解释如何做到这一点......

PHP查询页面

查询您的数据并将其作为JSON返回。 PHP有一个json_encode()函数来执行此操作。

// ...your code to query database which should make an array like this
$query_results = array(
    array('agent'=>'Agent 1'),
    array('agent'=>'Agent 2'),
    array('agent'=>'Agent 3')
);

return json_encode($query_results);

HTML页面应该有您的选择

<select name="agenteExt" id="agenteExt"></select>

的JavaScript

通过AJAX获取数据的函数

function loadDoc(url, callback){
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function(){
        if (xhttp.readyState == 4 && xhttp.status == 200){
            if( callback ) callback(xhttp)
        }
    }
    xhttp.open("GET", url, true);
    xhttp.send();
}

获取数据以填充html

的功能
function fillOptions(){
    loadDoc('your-query-page.php', function(xhttp){

        // parse the JSON data into a JavaScript object
        var data = JSON.parse(xhttp.responseText);

        // get the `<select>` element
        var el = document.getElementById('agenteExt');

        var html = '<option>Make a selection</option>';

        // loop through data and create each `<option>` for the select
        for(i = 0; i < data.length; i++){
            html += '<option value="'+data[i].agent+'">'+data[i].agent+'</option>'
        }

        // update the select with the new options
        el.innerHTML = html;
    }
}