Передача Javascript Переменная в запрос JSON

Предупреждающий драйвер для ученика!Передача Javascript Переменная в запрос JSON

Я пытаюсь передать содержимое поля поиска из формы ниже именованной переменной «имя» & введите ее в поле тегов Flickr API JSON (строка 40 ниже). Я пробовал всевозможные способы объявления переменной &, похоже, не может найти то, что я ищу в Интернете. Я предполагаю, что его я не знаю точно, что я ищу.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery.getJSON demo</title> 
    <style> 
    img { 
    height: 100px; 
    float: left; 
    } 
    </style> 
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
</head> 
<body> 

<form id="search"> 

    <p><input id="search-name" type="text" placeholder="Type Region Here"></p> 
    <p><input id="search-submit" type="submit" value="Search For Region"></p> 

</form> 

<div id="images"></div> 

<script> 

    var name; 

    $("#search").submit(function(event){ 
    event.preventDefault(); 
    var name = $("#search-name").val(); 
    console.log("Search Term Was: "+name); 
    return false; 
    }); 

    $("#search").submit(function(event) { 
    (function() { 
     var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 
     $.getJSON(flickerAPI, { 
     tags: name, 
     tagmode: "any", 
     format: "json" 
     }) 
     .done(function(data) { 
      $.each(data.items, function(i, item) { 
      $("<img>").attr("src", item.media.m).appendTo("#images"); 
      if (i === 0) { 
       return false; 
      } 
      }); 
     }); 
    })(); 
    }); 
</script> 

</body> 
</html>

Был бы кто-нибудь таким добрый, чтобы помочь/поставить меня в правильном направлении?

источник

2015-10-15 Mr T

Не переобъявить 'вар name' снова в ваших' $ («#search»). submit' function. Это делает область var 'name' локальной для этого. Это означает, что он имеет значение null или не имеет значения при передаче функции JSON. Вы хотите, чтобы это: '/ * var */name = $ (" # search-name "). Val();' – user3065931

Почему вы добавили '$ (" # search "). Submit()' дважды? Одного достаточно. – vijayP

Слушатели были по ошибке. Понял об этом! благодаря –

Для этого вам не нужны 2 слушателя. var name = $("#search-name").val(); создаст локальную область для name, следовательно, вы не найдете значения в глобальном name.

Попробуйте так:

$("#search").submit(function(event) { 
 
    event.preventDefault(); 
 
    var name = $("#search-name").val(); 
 
    var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 
 
    $.getJSON(flickerAPI, { 
 
     tags: name, 
 
     tagmode: "any", 
 
     format: "json" 
 
    }) 
 
    .done(function(data) { 
 
     $.each(data.items, function(i, item) { 
 
     $("<img>").attr("src", item.media.m).appendTo("#images"); 
 
     if (i === 0) { 
 
      return false; 
 
     } 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>jQuery.getJSON demo</title> 
 
    <style> 
 
    img { 
 
     height: 100px; 
 
     float: left; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 

 
    <form id="search"> 
 

 
    <p> 
 
     <input id="search-name" type="text" placeholder="Type Region Here"> 
 
    </p> 
 

 
    <p> 
 
     <input id="search-submit" type="submit" value="Search For Region"> 
 
    </p> 
 

 
    </form> 
 

 
    <div id="images"></div> 
 

 

 

 
</body> 
 

 
</html>

источник

2015-10-15 08:37:27 Rayon

Запуск Jquery как это, кажется, работает для меня. Вы можете проверить это, но также отметить, что я изменил ссылку на мерцать быть загружен как безопасный сценарий:

var name; 

$("#search").submit(function(event){ 
    event.preventDefault(); 
    name = $("#search-name").val(); 
    alert("Search Term Was: "+name); 

    var flickerAPI = "https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"; 
    $.getJSON(flickerAPI, { 
     tags: name, 
     tagmode: "any", 
     format: "json" 
    }) 
    .done(function(data) { 
     alert('done'); 
     $.each(data.items, function(i, item) { 
      $("<img>").attr("src", item.media.m).appendTo("#images"); 
      if (i === 0) { 
       return false; 
      } 
     }); 
    }) 
    .fail(function() {alert('fail')}); 
});

JS Fiddle: https://jsfiddle.net/vsw3r31k/

источник

2015-10-15 08:50:44

Передача Javascript Переменная в запрос JSON

ответ

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