来自 PHP API 的自动填充地址答案

【问题标题】：autofill address from PHP API来自 PHP API 的自动填充地址
【发布时间】：2017-11-08 12:29:09
【问题描述】：

我正在尝试为 Javascript 中的地址进行自动填充。在 Google 和 Stackoverflow 上，我阅读了一些主题。

但是，我无法正常工作。我在禁用的表单中没有得到结果。

我使用这个代码：

索引.php

表格和支票

<form name="form1" method="post" action="<? echo $PHP_SELF;?>">
<input id="postcode" type="text" class="form-control" name="postcode" placeholder="bijv. 0000AA" required="" aria-required="true">
<input id="number" type="text" class="form-control" name="number" placeholder="bijv. 000" required="" aria-required="true">
<input id="straat" type="text" class="form-control" name="straat" placeholder="" disabled>
<input id="plaats" type="text" class="form-control" name="plaats" placeholder="" disabled>
<input class="btn btn-primary" type="submit" name="submit" value="Controleer" />
</form>

<script type="text/javascript">
$(document).ready(function() {
    function myrequest(e) {
        var name = $('.username').val();
        $.ajax({
            method: "GET",
            url: "pcget.php", /* online, change this to your real url */
            data: {
                postcode: pcode
                number: pnumber
            },
            success: function( responseObject ) {
                alert('success');
                $('#straat').val( 'straat' );
                $('#plaats').val('plaats');
                /*
                once you've gotten your ajax to work, then go through and replace these dummy vals with responseObject.whatever
                */
            },
            failure: function() {
                alert('fail');
            }
        });
    }

    $('#fetchFields').click(function(e) {
        e.preventDefault();
        myrequest();
    });
});
</script>

pcget.php

这是检查的地方。

<?php

include_once '../php/config.php';

$postcode = $_GET['pcode'];
$number = $_GET['pnumber'];

$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => "https://api.postcodeapi.nu/v2/addresses/?postcode=". $postcode ."&number=". $number ."",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "GET",
  CURLOPT_HTTPHEADER => array(
    "accept: application/hal+json",
    "x-api-key: <snip>"
  ),
));

$response = curl_exec($curl);

$err = curl_error($curl);

$object = json_decode($response, true);
$postcode = $object['_embedded']['addresses']['0']['postcode'];
$plaats = $object['_embedded']['addresses']['0']['city']['label'];
$straat = $object['_embedded']['addresses']['0']['street'];
$number = $object['_embedded']['addresses']['0']['number'];

if(empty($_POST) === false)
{
echo ''. $plaats .', ';
echo ''. $straat .', ';
}

?>

I get the inspiration from here

【问题讨论】：

不要将输入字段设置为禁用。将它们设置为只读
感谢您的评论，我已将它们设置为只读，但这并没有解决问题。
什么是#fetchFields？你的ajax调用是否运行？看到成功提醒了吗？

标签： javascript php ajax

【解决方案1】：

我稍微更改了代码。但是现在，当我在填写 postcode 和 nummer 字段后单击 index.php 上的 fetch 按钮时，我会转到页面 pcget.php 并看到正确的输出。但我希望在 Index.php 页面上的只读字段中输出。

我现在的代码：

索引.php

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" type="text/css" rel="stylesheet">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" type="text/javascript"></script>

</head>

<body><form method="POST" action="pcget.php">
<fieldset>
<legend>Form</legend>
<label for="postcode">postcode: </label>
<input type="text" name="postcode" id="postcode"> 
<label for="postcode">nummer: </label>
<input type="text" name="nummer" id="nummer"> 
<button id="fetchFields">fetch</button>
<label for="plaats">Plaats: </label>
<input type="text" size="20" name="plaats" id="plaats">
<label for="straat">Straat: </label>
<input type="text" size="20" name="straat" id="straat">



<p><input type="submit" value="Submit" name="submitBtn"></p>

</fieldset>
</form>
<script type="text/javascript">
$(document).ready(function() {
    function myrequest(e) {
        var name = $('.username').val();
        $.ajax({
            method: "GET",
            url: "website.com/pcget.php", /* online, change this to your real url */
            data: {
                postcode: pcode
                number: pnumber
            },
            success: function( responseObject ) {
                alert('success');
                $('#plaats').val( 'plaats' );
                $('#straat').val('straat');
                /*
                once you've gotten your ajax to work, then go through and replace these dummy vals with responseObject.whatever
                */
            },
            failure: function() {
                alert('fail');
            }
        });
    }

    $('#fetchFields').click(function(e) {
        e.preventDefault();
        myrequest();
    });
});

</script>



</body></html>

pcget.php

<?php

session_destroy();

include_once '../php/config.php';

PRINT_R($_POST);

$postcode = $_POST['postcode'];
$number = $_POST['nummer'];

$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => "https://api.postcodeapi.nu/v2/addresses/?postcode=". $postcode ."&number=". $number ."",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 30,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "GET",
  CURLOPT_HTTPHEADER => array(
    "accept: application/hal+json",
    "x-api-key: xxx"
  ),
));

$response = curl_exec($curl);

$err = curl_error($curl);

$object = json_decode($response, true);
$postcode = $object['_embedded']['addresses']['0']['postcode'];
$plaats = $object['_embedded']['addresses']['0']['city']['label'];
$straat = $object['_embedded']['addresses']['0']['street'];
$number = $object['_embedded']['addresses']['0']['number'];

$_SESSION['postcode'] = $postcode;
$_SESSION['plaats'] = $plaats;
$_SESSION['straat'] = $straat;

if(empty($_POST) === false)
{
echo ''. $plaats .', ';
echo ''. $straat .', ';
}

?>

【讨论】：