2017-01-26 3 views
0

Я пытался научиться использовать 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; 
} 

Я пробовал несколько вариантов, пытаясь сделать эту работу, но все, что я получаю функция ошибки обратно. Вы могли бы помочь мне здесь?

Если я вхожу, например, "фишки" в поле ввода, он будет генерировать этот 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" 
      } 
     ] 
    } 
} 

Спасибо!

+0

Посмотрите вкладку сети инспектора хрома, чтобы узнать, что происходит с запросом ajax. –

+0

Какие ошибки вы видите? –

+0

Что вы видите при доступе к 'searchURL' в своем браузере? – empiric

ответ

4

Вы используете кнопку отправки. Форма отправляется при нажатии кнопки. Поэтому вам необходимо предотвратить отправку формы. Теперь случается, что у вас есть условие гонки с призывом Ajax и отправкой формы. Выигрывает форма.

onclick="getFormData(); return false;" 

Было бы лучше, чтобы прикрепить событие с JQuery или addEventListener и использовать preventDefault.

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

И когда вы читаете значение, необходимо для кодирования значения

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

не объясняет, что обработчик ajax 'error' называется – Igor

+0

не отвечает на вопрос. одновременные запросы не связаны с вызовом обратного вызова ошибки –

+0

Спасибо! Я добавил return false и теперь вижу объект, полученный в консольном меню. Просто чтобы убедиться, что я понял проблему. Когда я нажал кнопку submit, он первоначально сбросил страницу, которая привела к отброшенной сессии, и ни один объект не вернулся? – user1796741

0

URL-адрес работает

http://api.nal.usda.gov/ndb/search/?format=json&q=us&sort=n&max=25&offset=0&api_key=h9TKX24GP1vDETSUfQc2hU8b4w3orECoocoQFeE7 

Вы можете получить "" для этикетки и это ниже дает ошибку

http://api.nal.usda.gov/ndb/search/?format=json&q=""&sort=n&max=25&offset=0&api_key=h9TKX24GP1vDETSUfQc2hU8b4w3orECoocoQFeE7 
+0

значение не будет неопределенным, оно может быть '' '' ' – epascarello

+0

, вы правы, обновлены. –

Смежные вопросы