使用来自PHP文件的变量使用AJAX自动填充文本框

时间:2014-03-28 15:48:31

标签: php jquery ajax json autocomplete

我正在做一个项目,我需要确保我的表单根据第一个文本框的输入立即自动填充2个文本框。现在我只是在测试。我不能使用数据库条目来填充我的表单,只能填充PHP变量。我的逻辑需要是这样的:用户在我的表单上的文本框中键入特定的10位数字(在PHP文件中指定),然后在对该PHP文件进行AJAX调用之后,其他两个文本框会自动填充特定条目。这绝对是我迄今为止遇到的更复杂的任务之一(noob)。我的代码不起作用,所以我真的很感激帮助它正常运行。

HTML就像这样:

<!--load scripts, libraries, etc.-->
<form method="GET">
Number: <input type="text" name="num" id="num">
First Name: <input type="text" name="first" id="first">
Last Name: <input tupe="text" name"last" id="last">
</form>

PHP:

<?php

$num=$_GET["num"];
$first=$_GET["first"];
$last=$_GET["last"];

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

?>

jQuery的:

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

     if (el.val().length === 10) {
        $.ajax({
            url: "http://localhost/test.php",
            cache: false,
            dataType: "json",
            type: "GET",
            data: "npi=" + el.val(),
            success: function (result) {
                $("#first").val(result.firstname);
                $("#last").val(result.lastname);
            }
        });
      }
   });
});

1 个答案:

答案 0 :(得分:1)

在ajax中这样改变它会很容易理解

        type: "GET",
        data:{num: el.val()},//if multiple then like this->data:{attr:val1,attr2:val2,...},

在php中

<?php

$first["John"]="john";//i hope you have these two values defined
$last["Smith"]="smith";

$num=$_GET["num"];

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

?>

<强>解释

看过程就像

  • 首先这个号码会在ajax的帮助下进入php(通过 ajax request)

type: "GET",data: {num: el.val()},

  • 因此我们将数字作为GET请求发送到php,在php中我们使用$_GET['num']得到这个数字,所以现在这个值将包含0123456789值。

现在我们正在检查php中的条件

if ($num=="0123456789") { //here we need to send the firstname and lastname values BACK TO THE AJAX REQUEST so we need to have these first and last names here in php defined somewhere manually or get it from database(if you have these first,last names in DB) echo json_encode($fill); }