从AJAX/PHP将多个活动值转换为JavaScript

我正在制作一个web应用程序，我正在尝试这样做，当您输入提供者的ID时，它会自动将它们输出到一个范围中，这是我的AJAX/JS调用

<script>
    function showHint(str) 
    {
        if (str.length == 0)
        { 
            document.getElementById("txtHint").innerHTML = "";
            return;
        }
        else
        {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function()
            {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                {
                    document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
                }
            }
        xmlhttp.open("GET", "../include/proveedores.php?q=" + str, true);
        xmlhttp.send();
        console.log(telfValor);
        }
    }
    </script>
<span id="txtHint"></span>
<input id="numa" type="text" onkeyup="showHint(this.value)">

函数showHint（str）
{
如果（str.length==0）
{ 
document.getElementById（“txtHint”）.innerHTML=“”；
返回；
}
其他的
{
var xmlhttp=new XMLHttpRequest（）；
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.getElementById（“txtHint”）.innerHTML=xmlhttp.responseText；
}
}
open（“GET”，”./include/proveedores.php？q=“+str，true）；
xmlhttp.send（）；
控制台日志（telfValor）；
}
}

这是它为进行搜索而调用的.php

<?
include('conexion.php');
$conex=conex();
// get the q parameter from URL
$q = $_REQUEST["q"];

$descrip = "";

// lookup all hints from array if $q is different from "" 
if ($q !== "")
{
    $sql = "SELECT * FROM SAPROV WHERE CodProv LIKE '$q'";
    $stmt = sqlsrv_query($conex, $sql);
    $row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
    $descrip = $row['Descrip'];
    $telf = $row['Telef'];
}

// Output "no suggestion" if no hint was found or output correct values 
echo $descrip === "" ? "no suggestion" : $descrip;
?>

有没有办法做到这一点

编辑：这是通过一个AJAX调用将各种值返回到跨度中

<script src="../js/jquery.js" type="text/javascript"></script>
    <script>
    function showHint(str)
    {
// If there is nothing on the textbox, there is nothing in the spans
        if (str.length === 0)
        {
            $('#Span Name').html("");
            $('#Telephone').html("");
            return;
        }

        $.ajax
        ({
//Here goes the file which contains the SQL call
            url: "../include/proveedores.php",
            data: {'q': str},
            dataType: "json",
            type: "GET",
// Here goes the data that goes into the spans
            success: function (data, status, jqXhr)
            {
                $("#Span Name").html(data["Array Name"]);
                $("#Telephone").html(data["Telephone"]);
            },
            error: function (jqXhr, textStatus, errorThrown)
            {
                console.log("Error response:", jqXhr.responseText);
            }
        });
    }
    </script>
// This is the text input that will be sent to your query file
<input type="text" onkeyup="showHint(this.value)">
<span id="Span Name"></span>
<span id="Telephone"></span>

函数showHint（str）
{
//如果文本框中没有任何内容，则跨度中没有任何内容
如果（str.length==0）
{
$（'#Span Name'）.html（“”）；
$（“#电话”）.html（“”）；
返回；
}
$.ajax
({
//下面是包含SQL调用的文件
url:“../include/provederes.php”，
数据：{'q'：str}，
数据类型：“json”，
键入：“获取”，
//下面是进入跨度的数据
成功：功能（数据、状态、jqXhr）
{
$（“#Span Name”）.html（数据[“数组名]）；
$（“#电话”）.html（数据[“电话]）；
},
错误：函数（jqXhr、textStatus、errorshown）
{
log（“错误响应：”，jqXhr.responseText）；
}
});
}
//这是将发送到查询文件的文本输入

proveedores.php：

<?
include('conexion.php');
$conex=conex();
// get the q parameter from URL, this is what you have posted
$q = isset($_REQUEST["q"]) ? $_REQUEST["q"] : "";

$descrip = "";

if (isset($q) && $q !== "")
{
// THIS IS PRONE TO SQL INJECTION! USE INTERNALLY!
    $sql = "SELECT * FROM PROVIDERS WHERE CodProv LIKE '$q'";
    $stmt = sqlsrv_query($conex, $sql);
    $row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
    $Variable = $row['Column Name'];
    $Telf = $row['Telef'];
    $Direc = $row['Direc1'];
}

// This is the array to be encoded to AJAX
$values = array();

// Output "no suggestion" if no hint was found or output correct values 
$values["ArrayName"] = ($Variable === "") ? "no suggestion" : $Variable;
$values["Telephone"] = ($Telf === "") ? "" : $Telf;

// Output the json data
print_r(json_encode($values));
?>

---

首先，您应该使用像jQuery这样的javascript库来处理所有艰难的AJAX提升。这会让你的生活变得更轻松。如果您想使用常规javascript，可以返回一个逗号分隔的字符串，然后解析每个由逗号分隔的值，但这可能会造成混乱。话虽如此，您可以使用jQueryAjax并以JSON编码的数据对象返回数据

.php

---

在。。。我不确定你是否遗漏了什么。谢谢你的回答，但我有一些要点1）我实际上在使用一个提供者列表，因为它太大了，它们上的TR调用一个OnClick，将and？id=添加到页面中，以便我可以在以后使用GET获取所有数据2）如果用户输入代码并且匹配，它需要是实时的，它需要填充跨度，descrip需要进入numa，telf需要进入numb，我如何准确地填充它们？3） 它不起作用：/include（'JSON.php'）到底是什么；？很抱歉，我是一个新手，但我没有AJAX、json方面的经验。你有什么版本的PHP<代码>包含（'JSON.php'）

包含JSON php库，用于序列化数据对象，以便您可以将它们以JSON格式（javascript知道如何读取）发送回浏览器。根据您的PHP版本，您必须下载JSON.PHP，然后将其包含在您的项目5.3中，因为我必须使用2008年的SQL SRV插件，但在我的PHP folderI中找不到任何名为JSON.PHP的文件。我刚刚用phpinfo检查了JSON 1.2和PHP5.3 for Windows，我想在每次将匹配代码插入numa时获取多个值，而无需重新刷新，也就是liveYou是对的，当我从db中输入代码时，它不会做任何事情，而在此之前，如果代码匹配，它将搜索具有该代码的提供程序的名称。

<?
include('conexion.php');
$conex=conex();
// get the q parameter from URL
$q = isset($_REQUEST["q"]) ? $_REQUEST["q"] : "";

$descrip = "";

// lookup all hints from array if $q is different from "" 
if ($q !== "")
{
    $sql = "SELECT * FROM SAPROV WHERE CodProv LIKE '$q'";
    $stmt = sqlsrv_query($conex, $sql);
    $row = sqlsrv_fetch_array($stmt, SQLSRV_FETCH_ASSOC);
    $descrip = $row['Descrip'];
    $telf = $row['Telef'];
}

$values = array();

// Output "no suggestion" if no hint was found or output correct values 
// NOTE: we're using the same "txtHint" here for the key as we do in the javascript function
$values["txtHint"] = ($descrip === "") ? "no suggestion" : $descrip;
// Set these to something useful
$values["txtPhone"] = "";
$values["txtAddress"] = "";

// Output the json data
print_r(json_encode($values));
?>

<script src="/script/jquery.js" type="text/javascript"></script>
<script>
    function showHint(str) {
        if (str.length === 0) {
            $('#txtHint').html(""); 
            return;
        }

        $.ajax({
            url: "../include/proveedores.php",
            data: {'q': str},
            dataType: "json",
            type: "GET",
            success: function (data, status, jqXhr) {
                $("#txtHint").html(data["txtHint"]);
                // You can do this same thing for the other data returned
                $("#txtPhone").html(data["txtPhone"]);
                $("#txtAddress").html(data["txtAddress"]);

            },
            error: function (jqXhr, textStatus, errorThrown) {
                console.log("Error response:", jqXhr.responseText);
            }
        });

        // Not sure where this is defined. It might throw an error
        console.log(telfValor);
    }
</script>
<span id="txtHint"></span>
<span id="txtPhone"></span>
<span id="txtAddress"></span>
<input id="numa" type="text" onkeyup="showHint(this.value)">