Question

我一直在努力学习如何使用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;
}

我尝试了多种不同的尝试来完成这项工作，但我得到的只是错误功能。你能帮助我吗？

如果我进入，例如＆＃34;筹码＆＃34;进入输入框，它会生成这个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"
            }
        ]
    }
}

谢谢！

Answer 1

您使用提交按钮。单击按钮时提交表单。因此，您需要阻止表单提交。现在发生的事情是你有Ajax调用和表单提交的竞争条件。表单提交获胜。

onclick="getFormData(); return false;"

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

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

当您读取该值时，您需要对值进行编码

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

Answer 2

网址有效

""

您可能会获得http://api.nal.usda.gov/ndb/search/?format=json&q=""&sort=n&max=25&offset=0&api_key=h9TKX24GP1vDETSUfQc2hU8b4w3orECoocoQFeE7标签，下面会出现错误

var createPoints = (x, y) => {
  return { x: x, y: y }
};

R.zipWith(createPoints, [1, 2, 3], ['a', 'b', 'c']);

// returns: [{"x": 1, "y": "a"}, {"x": 2, "y": "b"}, {"x": 3, "y": "c"}]

AJAX没有回报价值

2 个答案: