Html 从SmartyStreets API返回AJAX_Html_Jquery_Ajax_Smartystreets

Html 从SmartyStreets API返回AJAX

html jquery ajax

Html 从SmartyStreets API返回AJAX,html,jquery,ajax,smartystreets,Html,Jquery,Ajax,Smartystreets,使用这个AJAX调用返回任何类型的对象都有困难。我知道我做错了什么，但我不知道在哪里。我希望有人能帮助我，我正在寻找返回对象“zip”中的元素。我真的很想得到任何回应，但我无法得到任何回报 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn

使用这个AJAX调用返回任何类型的对象都有困难。我知道我做错了什么，但我不知道在哪里。我希望有人能帮助我，我正在寻找返回对象“zip”中的元素。我真的很想得到任何回应，但我无法得到任何回报

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#submit').click(function() {
                var result = $('#resultDiv')
                $.ajax({
                    url: 'https://us-street.api.smartystreets.com/street-address',
                    method: 'get',
                    data: {
                        auth-id='your-auth-id',
                        auth-token='your-auth-token',
                        street=$('#street'),
                        city=$('#city'),
                        state=$('#state')
                    },
                    dataType: 'json',
                    success: function(data) {
                        if (data = null)
                        {
                          result.html('You failed');
                        }
                        else {
                          result.html('Match:' + data.components[0].zipcode)
                        }
                    }
                });
            });
        });
    </script>
    <title>SSTest</title>
</head>

<body>
    <div class="container">
        <h1 style="text-align:center"> Welcome to Address Check </h1>
        <form action="#" method="post">
            <div class="form-group">
                <label for="street">Street</label>
                <input type="text" id="street" class="form-control" name="street">
            </div>
            <div class="form-group">
                <label for="city">City</label>
                <input type="text" id="city" class="form-control" name="city">
            </div>
            <div class="form-group">
                <label for="state">State</label>
                <input type="text" id="state" class="form-control" name="state">
            </div>
            <button type="submit" id="submit" class="btn btn-default">Submit</button>
            <br/>
            <br/>
            <div id="resultDiv"></div>
</body>

</html>


$（文档）.ready（函数（）{
$（“#提交”）。单击（函数（）{
var result=$（“#resultDiv”）
$.ajax({
网址：'https://us-street.api.smartystreets.com/street-address',
方法：“get”，
数据：{
auth id='your-auth-id'，
auth-token='your-auth-token'，
街道=$（“#街”），
城市=$（“#城市”），
州=$（“#州”）
},
数据类型：“json”，
成功：功能（数据）{
如果（数据=null）
{
html（“您失败了”）；
}
否则{
html（'Match:'+data.components[0].zipcode）
}
}
});
});
});
SSTest
欢迎光临地址查询
街头
城市
陈述
提交

当您使用GET调用时，您可以首先在浏览器中进行测试，并确保在开始将其包装到JQuery调用之前收到响应

https://us-street.api.smartystreets.com/street-address?auth-id=[your auth id]&auth token=[your auth token]&street=SOMETHING&state=SOMETHING&city=SOMETHING

如果您得到了一个非结果，那么请参考API以查看是否传递了正确的参数

使用，此调用将返回API键的数据-

https://us-street.api.smartystreets.com/street-address?auth-id=[your auth id]&auth token=[your auth token]&street=1600+圆形剧场+pkwy&city=mountain+view&state=CA&候选者=10

此JQuery Get HTML示例获取一个响应-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("https://us-street.api.smartystreets.com/street-address?auth-id=[your-auth-id]&auth-token=[your-auth-token]&street=1600+amphitheatre+pkwy&city=mountain+view&state=CA&candidates=10", function(data, status){
            alert("zipcode: " + JSON.stringify(data));
        });
    });
});
</script>
</head>
<body>

<button>Send an HTTP GET request to a page and get the result back</button>

</body>
</html>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$.get（”https://us-street.api.smartystreets.com/street-address?auth-id=[your auth id]&auth token=[your auth token]&street=1600+圆形剧场+pkwy&city=mountain+view&state=CA&候选者=10“，函数（数据、状态）{
警报（“zipcode:+JSON.stringify（数据））；
});
});
});
向页面发送HTTP GET请求并返回结果

您应该能够在完善JQuery理解的同时从中构建您所需要的内容。

我能够在您的代码中找到一些错误，并在中修复了它们。以下是您的错误列表

不要在公共代码中包含您的身份验证id、身份验证令牌。你这样做是在泄露你的地址查询。您应该从您的帐户中删除这些内容并生成新的内容

在原始的

success

函数中，您没有进行比较。您应该在这里使用

==

。事实上，API在成功时永远不会为数据发回null，所以您甚至不再需要在这里使用它。改用

error

功能

ajax调用中传递的数据对象执行不正确。您不应该使用

，而应该使用

：

在数据对象中，您应该在jQuery选择器之后调用

.val（）

，以获取输入到这些字段中的值

data.components[0]。zipcode

应该是

data[0]。components.zipcode

。api将返回对象的数据数组<代码>组件不是数组

我已经对它进行了测试，并确认这些凭证和信息确实返回了一个对象，但我认为我根本没有得到响应。我认为这可能是间隔问题，并检查了它，但仍然没有得到任何回报。请记住，为了得到响应，如果地址无效，您必须将匹配参数设置为“无效”，您确实不应该发布您的身份验证id和令牌。从您的帐户中删除这些内容并创建一个新的对是个好主意。我已经屏蔽了身份验证。