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

我有一个古怪的问题。 我需要确保我的表单中的文本框基于来自表单中另一个文本框的用户输入,使用PHP脚本中创建的2个JSON对象进行自动填充。

HTML:

Number:

First Name:

Last Name:

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的

  "John", 'lastname' => "Smith",); echo json_encode($fill); } else { echo "Bad input."; } ?> 

JSON字符串在我的服务器上运行,所以我认为我的PHP不好。 一旦用户在0123456789中键入第一个文本框,其他2个分别用John和Smith填充,逻辑应该是在哪里。 自动完成function根本不起作用(可能是由于我的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); } }); } }); }); 

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

试试这个,这个工作正常,我在我的系统中测试了这个。

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

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

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

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