自动提交表单和Ajax获取请求

时间:2013-11-09 09:18:36

标签: jquery ajax json api

我在redline13.com找到了一个很棒的邮政编码API。我想我节省了创建所有状态名称下拉的时间,也避免用户错误地输入他们的城市名称等。我创建了一个自动提交它的表单和jquery函数(不离开页面或刷新)。 API通过发送ajax get请求工作,然后返回带有城市名称和状态的json文件。 Test Page

我通过API KEY发送请求:

http://zipcodedistanceapi.redline13.com/rest/js-bv3HUmAIwyrRsioAsTfvDivJG45kauam0e3UAEC7d3ZFmngPgvkUNQDuUJO5eYre/info.json/ /度

首先,我如何操纵此网址获取链接并将用户输入的<zip_code>(例如12345)放入? 其次,如何根据结果在文本框citystate中发布结果?

Json file returned looks like this:
{
    "zip_code": "10956",
    "lat": 41.150001,
    "lng": -73.990051,
    "city": "New City",
    "state": "NY",
    "timezone": {
        "timezone_identifier": "America/New_York",
        "timezone_abbr": "EST",
        "utc_offset_sec": -18000,
        "is_dst": "F"
    }
}

Jquery Autosubmit

<script>
$(document).ready(function () {
    var timer = null;
    var dataString;

    function submitForm() {
        $.ajax({
            type: "POST",
            url: "city_finder/index.php",
            data: dataString,
            dataType: "html",
            success: function (data) {
                $("#zip_result").html(data);
            }
        });
        return false
    }
    $("#zip_input").on("keyup", function() {
        clearTimeout(timer);
        timer = setTimeout(submitForm, 40);
        var zip_input = $("#zip_input").val();
       dataString = { zip_input : zip_input }
    })
});
</script>

0 个答案:

没有答案