来自PHP API的自动填充地址

时间:2017-11-08 12:29:09

标签: javascript php ajax

我正在尝试使用Javascript对地址进行自动填充。 在Google和Stackoverflow上,我已经阅读了一些主题。

然而,我没有让它发挥作用。我的残障表格中没有结果。

我使用此代码:

的index.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

1 个答案:

答案 0 :(得分:0)

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

我现在的代码:

的index.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 .', ';
}

?>