Question

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

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中键入第一个文本框，其他2个分别用John和Smith填充，逻辑应该是在哪里。自动完成功能根本不起作用（可能是由于我的jQuery / AJAX代码），所以我非常感谢您在解决此问题方面可以提供的任何帮助。

编辑：我通过错误控制台发现我的jQuery无法连接到我的localhost。我通过允许跨源通信来解决这个问题。不得不添加

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);
            }
        });
    }
});
});

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

Answer 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.";
}

Answer 2

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

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

Answer 3

在尝试访问之前，请尝试使用$.getJSON()代替$.ajax()或执行$.parseJSON(result)。

从PHP文件中的JSON数据自动填充文本框

3 个答案: