来自 PHP API 的自动填充地址

Posted

技术标签:

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

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

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

我使用这个代码:

索引.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调用是否运行?看到成功提醒了吗? 【参考方案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 .', ';


?>

【讨论】:

以上是关于来自 PHP API 的自动填充地址的主要内容,如果未能解决你的问题,请参考以下文章

自动填充地址 + Google Maps API

php Google地址自动填充字段重新排序#plugin #checkout

如果用户在Google地图自动填充中选择地址,则忽略模糊事件

显示rest api json响应,如使用angular js的文本框自动填充

PHP - 输入标签上的自动完成

自动填充 Odoo 11 中的一些字段