3

我正在尝试实现 SmartyStreets API 以通过表单验证地址:街道、城市和州。我已经实现了没有 AJAX 实现,但是当我切换到 AJAX 实现时。这没用?我阅读了使用 JSONP 的必要性,但我没有使用 AJAX 直接 POST 到 SmartyStreets API。相反,我发布到将验证的 PHP 脚本。我计划做其他事情,例如在后端缓存地址请求和验证地址以及响应。我创建了一个域密钥来访问 SmartyStreets 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>

这是我的 PHP 脚本,用于 AJAX 将我的地址发布到:

<?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>";


?>
4

1 回答 1

1

Your problem is in this line of JavaScript in your client code:

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

It appears that you are trying to do a DOM descendant search on the data that the SmartyStreets API is returning. That will not work. What is returned from the API is raw JSON data. It will look like this:

[{"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"}}]

Or formatted with your print_r(json_decode($page)); command it will look like this:

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
                )

        )

)

As you can see, this is not something that you can use the jQuery .find() function on.

Your code is already working properly for what you are asking. Your form POSTs to the PHP script and returns a response from the SmartyStreets API.

Congratulations. Now you just need to handle the data that is returned.

Might I suggest that you start with changing this:

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

To this:

//var content = $( data ).find( "#content" );
$( "#result" ).empty().append( data );
于 2015-08-04T23:16:33.983 回答