如何发送 json GET 请求并在提交时添加表单数据。答案

【问题标题】：How can I send json GET request and add form data on submit.如何发送 json GET 请求并在提交时添加表单数据。
【发布时间】：2015-10-09 08:12:59
【问题描述】：

我有一个简单的表格...

<form id="myForm" >
            <div>
                <label for="airport">Airport:</label>
                <input type="text" id="airport" />
            </div>                
            <div class="button">
                <button id="submit"  type="submit">Submit</button>
            </div>
        </form>

我正在尝试发送 json 请求。当我用参数对 url 进行硬编码时，它工作正常。一旦我尝试从我的表单中添加参数，就提交..它会中断。我已经尝试了我能找到的每一个建议......似乎没有任何效果。我不是 jquery/javascript 方面的专家，只是学习 json。任何帮助，将不胜感激。提前致谢。这是我的工作请求......但我想添加表单字段#airport，而不是在 json url 字符串中硬编码机场名称 ATL。

$(function () {    

$.getJSON('http://services.faa.gov/airport/status/ATL?format=json', function(data) {

    var output;
    output =  data.state + " | " + data.name +  " | " + data.IATA + " | " + data.status.reason + "<hr />";        
    document.getElementById("placeholder").innerHTML = output;
});

【问题讨论】：

重复问题stackoverflow.com/questions/1200266/submit-a-form-using-jquery
我已经找到了 SerMintt 的答案，但它对我没有帮助，这就是我在这里问的原因。

标签： jquery json forms get

【解决方案1】：

<script type="text/javascript">
    $(function () { 

    $("#submit").click(function(){
        $.getJSON('http://services.faa.gov/airport/status/'+$("#airport").val().trim()+'?format=json', function(data) {
            var output;
            output =  data.state + " | " + data.name +  " | " + data.IATA + " | " + data.status.reason + "<hr />";        
            document.getElementById("placeholder").innerHTML = output;
        });
        return false;
    });   

});
</script>

<form id="myForm" >
    <div>
        <label for="airport">Airport:</label>
        <input type="text" id="airport" />
    </div>                
    <div class="button">
        <button id="submit"  type="submit">Submit</button>
    </div>
</form>
<div id="placeholder"></div>

这些代码会帮助你，我认为你错过的只是'return false'

【讨论】：

非常感谢......这确实是我的错误，省略了 return false。一旦我添加了这一点，我之前的尝试都奏效了！感谢您的详细回答...非常有帮助！

【解决方案2】：

您可以尝试以下方法：

HTML：

<form id="myForm" >
    <div>
        <label for="airport">Airport:</label>
        <input type="text" id="airport" />
    </div>                
    <div class="button">
        <button id="submit"  type="submit">Submit</button>
    </div>
</form>

JavaScript：

$(document).ready(function() {
    $('#myForm').bind('submit', function() { 
        var airportValue = $("#airport");

        $.getJSON('http://services.faa.gov/airport/status/'+airportValue+'?format=json', function(data) {
            var output;
            output =  data.state + " | " + data.name +  " | " + data.IATA + " | " + data.status.reason + "<hr />";        
            document.getElementById("placeholder").innerHTML = output;
        });

        return false; 
    });
});

在提交表单时，我们只是将用户输入的值抓取到input#airport 并为$getJSON 调用准备URL。

【讨论】：