从 PHP 文件中的 JSON 数据自动完成文本框答案

【问题标题】：Autocompleting textboxes from JSON data in a PHP file从 PHP 文件中的 JSON 数据自动完成文本框
【发布时间】：2014-04-01 19:12:45
【问题描述】：

我有一个古怪的问题。我需要确保表单中的文本框自动填充 2 个 JSON 对象，这些对象是根据表单中另一个文本框的用户输入在 PHP 脚本中创建的。

HTML：

<p>Number: <input type="text" name="numbox" id="numbox" maxlength="10"></p>
<p>First Name: <input type="text" id="firstnamebox" maxlength="20" name="firstnamebox"></p>
<p>Last Name: <input type="text" id="lastnamebox" maxlength="20" name="lastnamebox"></p>

jQuery:

$(document).ready(function () {
$("#numbox").keyup(function () {
    var el = $(this);

    if (el.val().length === 10) {
        $.ajax({
            url: "http://localhost/test.php",
            dataType: "json",
            type: "POST",
            data: {el.val()},
            success: function (result) {
                $("#firstnamebox").val(result.firstname);
                $("#lastnamebox").val(result.lastname);
            }
        });
    }
});
});

test.php

<?php

$num=$_POST["numbox"];

if ($num="0123456789")
{
    $fill = array('firstname' => "John", 'lastname' => "Smith",);
    echo json_encode($fill);
}
else
{
    echo "Bad input.";
}

?>

JSON 字符串在我的服务器上工作，所以我不认为我的 PHP 不好。逻辑应该是用户在第一个文本框中输入 0123456789 后，其他两个分别填充 John 和 Smith。自动完成功能根本不起作用（可能是由于我的 jQuery/AJAX 代码），所以如果您能在解决此问题方面提供任何帮助，我将不胜感激。

编辑： 我通过错误控制台发现我的 jQuery 无法连接到我的本地主机。我通过允许跨域通信解决了这个问题。不得不添加

header("Access-Control-Allow-Origin: *");

到我的 PHP 脚本的顶部以允许连接。它也可以从您的服务器控制面板进行更改。下一个问题是由于我的 jQuery 代码。一位更有经验的开发人员建议进行一些代码更改，现在看起来像这样：

$(function () {
$("#numbox").keyup(function () {
var el = $(this);

    if (el.val().length === 10) {
        $.ajax({
            url: "http://localhost/test.php",
            dataType: "json",
            type: "POST",
            data: "numbox="+el.val(),
            success: function (result, success) {
                $("#firstnamebox").val(result.firstname);
                $("#lastnamebox").val(result.lastname);
            }
        });
    }
});
});

我很高兴它有效。感谢任何帮助过我的人。

【问题讨论】：

您的 ajax 代码中有语法错误。
@RenéRoth jsfiddle 据我所知不适用于 PHP？
@Musa 介意扩展一下吗？

标签： php jquery ajax json forms

【解决方案1】：

试试这个，效果很好，我已经在我的系统中测试过了。

$(function () {
$("#numbox").keyup(function () {
    var el = $(this);

   if (el.val().length === 10) {

        $.ajax({
            url: "test.php",
            dataType: "json",
            type: "POST",
            data: {'numbox':el.val()},
            success: function (result) {

                //try to put alert(result); to see what response you've got

                response = jQuery.parseJSON(result);
                $("#firstnamebox").val(response.firstname);
                $("#lastnamebox").val(response.lastname);
            }
            error: function(error) {
            alert(error);
            }
            });
        }
    });
});

在test.php

中

$num=(!empty($_POST["numbox"]))?$_POST["numbox"]:die('NUM is empty');

if ($num=="0123456789")//double equal to
{
    $fill = array('firstname' => "John", 'lastname' => "Smith",);
    echo json_encode($fill);
}
else
{
    echo "Bad input.";
}

【讨论】：

感谢您的回复。这段代码看起来应该做我需要它做的一切，但我一直在努力让它工作。我知道我的库加载正常，因为我还使用 jQuery 插件根据用户的邮政编码自动填写州和城市。我已经在我的 IIS 服务器上多次测试了 PHP。请问除了code还有什么设置？如果它对您来说工作正常（在第一个文本框中输入 0123456789，在另外两个文本框中自动获取数据），那么我不知道会出现什么问题，因为我正在使用您的代码。好困惑。
尝试启用开发者工具（按F12键）并检查您在运行程序时是否有任何错误
感谢您的建议。它引导我解决问题。如果您想了解如何操作，请查看我的编辑。

【解决方案2】：

您在 ajax 调用中输入的数据应该是：

data: {'numbox':el.val()}

【讨论】：

感谢您的建议。我更改了它，但不幸的是，自动完成功能仍然无法正常工作。
添加了 exit();仍然没有运气。
您知道将numbox 值分配给$num 的内容。在 php.ini 中将 == 添加到您的比较中。这次应该可以了。
我添加了它，现在当我访问 .php 文件时，它会从我的 else 提示“错误输入”，而不是像使用单个运算符那样提示 JSON 数据。自动填充仍然不起作用:(
删除 if else 条件以验证代码的重要部分 - 即自动填充名字和姓氏。一旦您能够自动填充，然后添加回您的 if 条件并检查您的 if 条件是否正确检查值以及您是否实际上通过输入框传递了 0123456789。

【解决方案3】：

在尝试访问之前尝试使用$.getJSON() 而不是$.ajax() 或使用$.parseJSON(result)。

【讨论】：