Didn"t forge 2017-01-26 20:52 采纳率: 25%
浏览 104

AJAX不返回值

I've been trying to learn how to use ajax however I can't seem to get any result back.

HTML code

<!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>

And this is my js file

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;
}

I've tried multiple variations in trying to make this work but all I'm getting is error function back. Would you be able to help me out here?

If I enter, for example, "chips" into input box, it would generate this URL: http://api.nal.usda.gov/ndb/search/?format=json&q=chips&sort=n&max=25&offset=0&api_key=DEMO_KEY

Which would be a valid json (checked)

{
    "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"
            }
        ]
    }
}

Thanks!

  • 写回答

2条回答 默认 最新

  • weixin_33708432 2017-01-26 20:58
    关注

    You use a submit button. The form submits when you click the button. So you need to prevent the form from submitting. What happens now is you have a race condition with the Ajax call and the form submitting. The form submitting wins.

    onclick="getFormData(); return false;"

    It would be better to attach the event with jQuery or addEventListener and use preventDefault.

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

    And when you read the value, you need to encode the value

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

报告相同问题？

悬赏问题

  • ¥100 set_link_state
  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度