html 从SmartyStreets API返回 AJAX

1l5u6lss 于 2022-12-16 发布在其他

关注(0)|答案(3)|浏览(113)

我有麻烦，实际上返回任何类型的对象使用此 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>

Html

来源：https://stackoverflow.com/questions/42408434/ajax-return-from-smartystreets-api

3条答案

按热度按时间

9rbhqvlz1#

当您使用GET调用时，可以先在浏览器中测试它，并确保在开始将它 Package 到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，看看是否传递了正确的参数。
使用DOCS，此调用返回API密钥的数据-
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
这个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>

当您完善对JQuery的理解以获得所需的内容时，您应该能够从中构建。

赞(0）回复(0）举报 2022-12-16

pdsfdshx2#

我在你的代码中发现了一些错误，并在this JSFiddle中修复了它们。
1.不要在公共代码中包含你的auth-id和auth-token。这样做会泄露你的地址查找。你应该从你的帐户中删除这些并生成新的。
1.在你原来的success函数中你没有做比较。你应该在这里使用==。实际上，API永远不会在成功时返回null数据，所以你甚至不再需要这个。使用error函数代替。

AJAX 调用中传递的数据对象执行不正确。您不应该使用=，而应该使用:。
1.在数据对象中，应该在jQuery选择器之后调用.val()，以获取输入到这些字段中的值。
data.components[0].zipcode应该是data[0].components.zipcode。API将返回对象的数据数组。components不是数组。

赞(0）回复(0）举报 2022-12-16

ev7lccsx3#

auth-id和token应该只在服务器端使用。文档中明确提到不要暴露auth-id和auth-token。
我使用了Javascript中的FETCH API，代码如下所示：

var key = '' //your embedded key here
var street = encodeURIComponent('1600 amphitheatre pkwy');
var city = encodeURIComponent('mountain view');
var state = 'CA';
var url = 'https://us-street.api.smartystreets.com/street-address?street=' + street + '&city=' + city + '&state=' + state + '&key=' + key;

const response = await fetch(url)
const responseData = await response.json()

赞(0）回复(0）举报 2022-12-16

我来回答

html 从SmartyStreets API返回 AJAX

3条答案

相关问题

热门标签

最新问答