如何使用SmartyStreets将AJAX发布到PHP脚本以进行地址验证？

Question

我试图通过表单实现SmartyStreets API来验证地址:街道、城市和州。我在没有AJAX实现的情况下实现了，但是当我切换到AJAX实现时。不管用吗？我阅读了使用JSONP的必要性，但我没有使用AJAX直接发布到JSONP API。相反，我将发布到一个将验证的PHP脚本中。我计划做其他的事情，比如缓存地址请求，并在后端使用响应验证地址。我已经创建了一个域密钥来访问CORS API，但由于CORS策略，我认为这仍然不能工作。

这是我的地址验证表：

<div class="container">
    <h2>Validate US address</h2>
    <form role="form" id="myForm" action="post_without_curl2-INPUT.php" method="POST">
        <div class="form-group">
            <label for="street">street:</label>
            <input type="text" class="form-control" id="street" name="street" placeholder="Enter street">
        </div>
        <div class="form-group">
            <label for="city">city:</label>
            <input type="text" class="form-control" id="city" name="city" placeholder="Enter city">
        </div>
        <div class="form-group">
            <label for="state">state:</label>
            <input type="text" class="form-control" id="state" name="state" placeholder="Enter state">
        </div>
        <!--<div class="checkbox">-->
            <!--<label><input type="checkbox"> Remember me</label>-->
        <!--</div>-->
        <button type="submit" class="btn btn-default">Submit</button>
    </form>
</div>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>

<script>
// Attach a submit handler to the form
$( "#myForm" ).submit(function( event ) {

    console.log("Submit form");

  // Stop form from submitting normally
  event.preventDefault();

  // Send the data using post
  var posting = $.post( "post_without_curl2-INPUT.php", $( "#myForm" ).serialize() );

  // Put the results in a div
  posting.done(function( data ) {
    var content = $( data ).find( "#content" );
    $( "#result" ).empty().append( content );
  });
});
</script>

这是我要AJAX的PHP脚本，将我的地址发布到：

<?php
// Your authentication ID/token (obtained in your SmartyStreets account)
$authId = urlencode("authID");
$authToken = urlencode("authToken");

// Your input to the API...
$addresses = array(
    array(
        "street" => $_POST['street'],
        "city"   => $_POST['city'],
        "state"  => $_POST['state'],
        "candidates" => 1
);

// LiveAddress API expects JSON input by default, but you could send XML
// if you set the Content-Type header to "text/xml".
$post = json_encode($addresses);

// Create the stream context (like metadata)
$context = stream_context_create(
    array(
        "http" => array(
            "method" => "POST",
            "header" => "Content-Type: application/x-www-form-urlencoded\r\n"
                        ."Content-Length: ".strlen($post)."\r\n",
            "content" => $post
        )
    )
);


// Do the request, and we'll time it just for kicks
$start = microtime(true);
$page = file_get_contents("https://api.smartystreets.com/street-address/?auth-id={$authId}&auth-token={$authToken}", false, $context);
$end = microtime(true);


//// Show results
echo "<pre>";
echo "<b>Round-trip time (including external latency):</b> ";
echo (($end - $start) * 1000)." ms<br><br><br>";    // Show result in milliseconds, not microseconds

print_r(json_decode($page));
echo "</pre>";


?>

Answer 1

您的问题是在客户端代码中的这一行JavaScript中：

var content = $( data ).find( "#content" );

看起来，您正在尝试对SmartyStreets API返回的数据执行DOM子代搜索。那是行不通的。从API返回的是原始的JSON数据。它看起来是这样的：

[{"input_index":0,"candidate_index":0,"delivery_line_1":"1 Infinite Loop","last_line":"Cupertino CA 95014-2083","delivery_point_barcode":"950142083017","components":{"primary_number":"1","street_name":"Infinite","street_suffix":"Loop","city_name":"Cupertino","state_abbreviation":"CA","zipcode":"95014","plus4_code":"2083","delivery_point":"01","delivery_point_check_digit":"7"},"metadata":{"record_type":"S","zip_type":"Standard","county_fips":"06085","county_name":"Santa Clara","carrier_route":"C067","congressional_district":"18","rdi":"Commercial","elot_sequence":"0031","elot_sort":"A","latitude":37.33053,"longitude":-122.02887,"precision":"Zip9","time_zone":"Pacific","utc_offset":-8,"dst":true},"analysis":{"dpv_match_code":"Y","dpv_footnotes":"AABB","dpv_cmra":"N","dpv_vacant":"N","active":"Y"}}]

或者用您的print_r(json_decode($page));命令格式化，它将如下所示：

Array
(
    [0] => stdClass Object
        (
            [input_index] => 0
            [candidate_index] => 0
            [delivery_line_1] => 1 Infinite Loop
            [last_line] => Cupertino CA 95014-2083
            [delivery_point_barcode] => 950142083017
            [components] => stdClass Object
                (
                    [primary_number] => 1
                    [street_name] => Infinite
                    [street_suffix] => Loop
                    [city_name] => Cupertino
                    [state_abbreviation] => CA
                    [zipcode] => 95014
                    [plus4_code] => 2083
                    [delivery_point] => 01
                    [delivery_point_check_digit] => 7
                )

            [metadata] => stdClass Object
                (
                    [record_type] => S
                    [zip_type] => Standard
                    [county_fips] => 06085
                    [county_name] => Santa Clara
                    [carrier_route] => C067
                    [congressional_district] => 18
                    [rdi] => Commercial
                    [elot_sequence] => 0031
                    [elot_sort] => A
                    [latitude] => 37.33053
                    [longitude] => -122.02887
                    [precision] => Zip9
                    [time_zone] => Pacific
                    [utc_offset] => -8
                    [dst] => 1
                )

            [analysis] => stdClass Object
                (
                    [dpv_match_code] => Y
                    [dpv_footnotes] => AABB
                    [dpv_cmra] => N
                    [dpv_vacant] => N
                    [active] => Y
                )

        )

)

正如您所看到的，这不是您可以使用jQuery .find()函数的东西。

您的代码已经为您所要求的内容正常工作。您的表单将发布到PHP并返回来自SmartyStreets API的响应。

祝贺你。现在只需要处理返回的数据。

我可以建议你从改变这个开始：

var content = $( data ).find( "#content" );
$( "#result" ).empty().append( content );

对此：

//var content = $( data ).find( "#content" );
$( "#result" ).empty().append( data );