javascript - AJAX没有返回值

标签 javascript jquery html ajax

我一直在尝试学习如何使用ajax,但我似乎无法得到任何结果。

HTML 代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="functions.js"></script>

    <div class="container">
        <form>
            <div class="form-group row">
              <label for="foodLabel" class="col-sm-2 col-form-label">Search For Food Label</label>
              <div class="col-sm-10">
                <input class="form-control" type="search" id="foodLabel">
              </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-offset-2 col-sm-10">
                    <button class="btn btn-default" type="submit" id="submit" onclick="getFormData()">Submit</button>
                </div>
            </div>
        </form>
    </div>

  </body>
</html>

这是我的 js 文件

function getFormData(){ 
    var foodLabel=document.getElementById('foodLabel').value;
    var searchURL = buildSearchURL(foodLabel);
    //console.log(searchURL);

    $.ajax({
        url: searchURL,
        type: "GET",
        dataType: "json",
        success: function(data){
            alert("success");
        },
        error: function(){
            alert("failure");
        }
    });

}

function buildSearchURL(label){
    var searchURL = "http://api.nal.usda.gov/ndb/search/?format=json&q=" + label + "&sort=n&max=25&offset=0&api_key=h9TKX24GP1vDETSUfQc2hU8b4w3orECoocoQFeE7";
    return searchURL;
}

我尝试了多种变体来尝试使这项工作正常进行,但我得到的只是错误函数。 你能帮我一下吗?

例如,如果我在输入框中输入“chips”,它将生成以下 URL: http://api.nal.usda.gov/ndb/search/?format=json&q=chips&sort=n&max=25&offset=0&api_key=DEMO_KEY

这将是一个有效的 json(已检查)

{
    "list": {
        "q": "chips",
        "sr": "28",
        "ds": "any",
        "start": 0,
        "end": 25,
        "total": 5292,
        "group": "",
        "sort": "n",
        "item": [
            {
                "offset": 0,
                "group": "Branded Food Products Database",
                "name": "ABE'S, MUFFINS, CHOCOLATE CHIP COOKIE, UPC: 044261720574",
                "ndbno": "45167403",
                "ds": "BL"
            },
            {
                "offset": 1,
                "group": "Branded Food Products Database",
                "name": "ACME FRESH MARKET, KETTLE COOKED POTATO CHIPS, SALT & CRACKED PEPPER, UPC: 036846481505",
                "ndbno": "45155196",
                "ds": "BL"
            },
            {
                "offset": 2,
                "group": "Branded Food Products Database",
                "name": "A&G, ALL NATURAL VEGGIE CHIPS, UPC: 752423299621",
                "ndbno": "45153673",
                "ds": "BL"
            },
            {
                "offset": 3,
                "group": "Branded Food Products Database",
                "name": "AHOLD, CHEWY GRANOLA BARS, PEANUT BUTTER CHOCOLATE CHIP, UPC: 688267163821",
                "ndbno": "45140163",
                "ds": "BL"
            },
            {
                "offset": 4,
                "group": "Branded Food Products Database",
                "name": "AHOLD, CRUNCHY GRANOLA CHIPS, BUTTER PECAN, UPC: 688267155703",
                "ndbno": "45144989",
                "ds": "BL"
            },
            {
                "offset": 5,
                "group": "Branded Food Products Database",
                "name": "AHOLD, CRUNCHY GRANOLA CHIPS, VANILLA BEAN, UPC: 088267155772",
                "ndbno": "45144990",
                "ds": "BL"
            },
            {
                "offset": 6,
                "group": "Branded Food Products Database",
                "name": "AHOLD, DUNKER COOKIES, WITH CHOCOLATE CHIPS, UPC: 688267151552",
                "ndbno": "45045677",
                "ds": "BL"
            },
            {
                "offset": 7,
                "group": "Branded Food Products Database",
                "name": "AHOLD, GRANOLA CHIPS, HONEY, UPC: 688267155697",
                "ndbno": "45149168",
                "ds": "BL"
            },
            {
                "offset": 8,
                "group": "Branded Food Products Database",
                "name": "AHOLD, LENTIL CHIPS, SEA SALT, UPC: 688267152481",
                "ndbno": "45165684",
                "ds": "BL"
            },
            {
                "offset": 9,
                "group": "Branded Food Products Database",
                "name": "AHOLD, OVAL DILLS HAMBURGER PICKLE CHIPS, UPC: 688267153181",
                "ndbno": "45044318",
                "ds": "BL"
            },
            {
                "offset": 10,
                "group": "Branded Food Products Database",
                "name": "AHOLD, POTATO CHIPS, SOUR CREAM & ONION, UPC: 688267119699",
                "ndbno": "45153253",
                "ds": "BL"
            },
            {
                "offset": 11,
                "group": "Branded Food Products Database",
                "name": "AHOLD, PROTEIN GRANOLA BARS, PEANUT BUTTER & DARK CHOCOLATE CHIPS, UPC: 688267164309",
                "ndbno": "45140175",
                "ds": "BL"
            },
            {
                "offset": 12,
                "group": "Branded Food Products Database",
                "name": "AHOLD, PUMPKIN SEED TORTILLA CHIPS, UPC: 688267157868",
                "ndbno": "45045470",
                "ds": "BL"
            },
            {
                "offset": 13,
                "group": "Branded Food Products Database",
                "name": "AHOLD, RIPPLED POTATO CHIPS, JALAPENO QUESO, UPC: 688267167928",
                "ndbno": "45158187",
                "ds": "BL"
            },
            {
                "offset": 14,
                "group": "Branded Food Products Database",
                "name": "AHOLD, SWEET HORSERADISH PICKLE CHIPS, UPC: 688267136092",
                "ndbno": "45235372",
                "ds": "BL"
            },
            {
                "offset": 15,
                "group": "Branded Food Products Database",
                "name": "AHOLD, WAFFLES, CHOCOLATE CHIP, UPC: 688267150029",
                "ndbno": "45178546",
                "ds": "BL"
            },
            {
                "offset": 16,
                "group": "Branded Food Products Database",
                "name": "AIR POPPED POTATO CHIPS, UPC: 011150224000",
                "ndbno": "45009759",
                "ds": "BL"
            },
            {
                "offset": 17,
                "group": "Branded Food Products Database",
                "name": "AIR POPPED POTATO CHIPS, UPC: 011150224017",
                "ndbno": "45009762",
                "ds": "BL"
            },
            {
                "offset": 18,
                "group": "Branded Food Products Database",
                "name": "AIR POPPED POTATO CHIPS, UPC: 011150224024",
                "ndbno": "45009763",
                "ds": "BL"
            },
            {
                "offset": 19,
                "group": "Branded Food Products Database",
                "name": "ALBERTSON'S, ICE CREAM, MINT CHIP, UPC: 041163458796",
                "ndbno": "45002572",
                "ds": "BL"
            },
            {
                "offset": 20,
                "group": "Branded Food Products Database",
                "name": "ALBERTSONS/SAFEWAY, OVEN BAKED COOKIES, CHOCOLATE CHIP, UPC: 022735920392",
                "ndbno": "45162949",
                "ds": "BL"
            },
            {
                "offset": 21,
                "group": "Branded Food Products Database",
                "name": "ALDEN'S, ICE CREAM, MINT CHIP, UPC: 072609741837",
                "ndbno": "45025020",
                "ds": "BL"
            },
            {
                "offset": 22,
                "group": "Branded Food Products Database",
                "name": "ALDEN'S, ORGANIC PREMIUM ICE CREAM, COFFEE CHIP, UPC: 072609043528",
                "ndbno": "45184092",
                "ds": "BL"
            },
            {
                "offset": 23,
                "group": "Branded Food Products Database",
                "name": "ALEIAS, GLUTEN FREE CHOCOLATE CHIP COOKIE, UPC: 855930001500",
                "ndbno": "45066064",
                "ds": "BL"
            },
            {
                "offset": 24,
                "group": "Branded Food Products Database",
                "name": "AL GELATO CHICAGO, GELATO, CHOCOLATE CHIP, UPC: 093959741032",
                "ndbno": "45185128",
                "ds": "BL"
            }
        ]
    }
}

谢谢!

最佳答案

您使用提交按钮。单击该按钮时将提交表单。所以你需要阻止表单提交。现在发生的情况是 Ajax 调用和表单提交存在竞争条件。提交表单获胜。

onclick="getFormData(); return false;"

最好使用 jQuery 或 addEventListener 附加事件并使用 PreventDefault。

$("form").on("submit", function (evt) {
    evt.preventDefault();
    getFormData();
} );

并且当读取该值时,需要对该值进行编码

var foodLabel = encodeURIComponent(document.getElementById('foodLabel').value);

关于javascript - AJAX没有返回值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41882793/

相关文章:

jquery - 如何使用jquery的animate方法让div来回移动

php - JQuery Post 到 PHP 插入数据,但 json 响应为 null

javascript - Console.log 不适用于 Reactjs 应用程序

javascript - 上传文件的内容更改后,FileReader onload 在 IE 11 中第二次尝试时不会被触发

javascript - 每个循环从 jQuery 中删除 item[i]

javascript - 如果传递 Canvas ,织物图像构造函数是否同步加载?

html - 如何使用 susy 在容器 div 之外拉伸(stretch)嵌套的 div 全宽?

javascript - 如何使用 React 从 CMS 渲染内容?

javascript - 当浏览器窗口 < 830px 时删除超链接但保留文本

javascript - 当我尝试使用 Children 属性和 offsetWidth 时,为什么我在控制台中收到无法读取属性消息?