Question

我正在尝试访问维基媒体API并显示十个结果。我编写了一个访问API并自行运行的函数但是，当我尝试集成搜索按钮来调用该功能并将搜索字符串传递给该功能时，Chrome或Firefox中没有任何反应。
（奇怪的是，当我在stackoverflow中使用代码段功能时，它工作正常！）我想知道为什么我的代码在浏览器中不起作用 - 这是否与同步/异步行为有关，如果是这样，会发生什么？

我非常欣赏对正在发生的事情有所了解......

谢谢！

＆＃13;

$(document).ready(function()  {

//  Initialize the Global Variables

var api = "http://en.wikipedia.org/w/api.php?callback=?&format=json&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=";
var searchTitle = "";
var searchString = "";


$('#submit').click( function() {
	searchTitle = $("input:text").val();
	searchString = api + searchTitle;
	getWiki(searchString);	
});

// the following function works if I call it statically outside of the button click  
// for example: getWiki(api + "giraffe");
// but it doesn't work if I call it dynamically from within the button.  Why?

function getWiki(val) {
	$.getJSON(val, function(json) {
	    $.each(json.query.pages, function(prop, item) {
	    	var id = "#result" + item.index
        	$(id).html(item.title + "<br>" + item.extract);
        });
	});
}

//  END Document Ready Function
});

＆＃13;

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<body>


<form class="form-wrapper">
    <input type="text" id="search" placeholder="Search for..." required>
    <input type="submit" value="go" id="submit">
</form>

<div class="container">
	<div class="row">
		<div class="col-xs-12">
			<div id="result1"></div>
			<div id="result2"></div>
			<div id="result3"></div>
			<div id="result4"></div>
			<div id="result5"></div>
			<div id="result6"></div>
			<div id="result7"></div>
			<div id="result8"></div>
			<div id="result9"></div>
			<div id="result10"></div>
		</div>
	</div>
</div>
</body>

＆＃13;

从按钮调用getJSON函数 - 在Chrome / Firefox

0 个答案: