我已经尝试了这段代码的几个公式，但得到了混合的、不引人注目的结果。这个想法非常简单:用户在文本框中输入一个搜索字符串，单击一个按钮，该字符串将传递给 var search。 search 变量然后通知 AJAX 请求，该请求被发送并返回一个 JSON 文件。然后，我暂时在 DOM 中显示该文件(下一步是清理它，尽管该文件随着按钮单击代码的引入而不断消失)。
最初，我在 $(document).ready(... 下直接声明了 var search，并认为我的按钮点击代码可用于获取搜索字符串从文本框中更新该变量。我错了。变量不会更新。如果有人知道为什么，我很想听听解释。
下面的代码试图通过将所有 AJAX 代码放在按钮单击上下文中来解决该问题，以便 AJAX 请求可以使用搜索变量。结果是一个 API 错误，它闪烁了一秒钟，表示搜索变量没有传递给 API。 Console.log 语句除了没有更新和/或传递搜索外，没有显示任何内容。这是怎么回事？
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- CSS -->
<style>
.container {
height: 50vh;
align-items: center;
}
/* code for sliding search box adapted from https://bootsnipp.com/snippets/2o42z */
</style>
<!-- JS/JQ -->
<script>
$(document).ready(function () {
// search parameter provided by user started with . . .
// var search;
$("button").on("click", function () {
// use .val(), .text() did not do the job
var search = $("#searchfield").val();
console.log(search);
// AJAX request options for WikiMedia API
var ajaxOptions = {
crossDomain: true,
dataType: "json",
url: "https://en.wikipedia.org/w/api.php",
method: "GET",
data: {
action:"query",
format:"json",
titles:search,
list:"search",
srsearch:search,
srprop:"snippet",
srlimit:"100",
origin:"*"
}
};
console.log(ajaxOptions);
$.ajax(ajaxOptions).done(updateDOM);
});
function updateDOM (json) {
$("#json-text").html(JSON.stringify(json));
}
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div id="json-text"class="col-md-12"> </div>
</div>
<div class="row">
<div class="col-md-12">
<form>
<input id="searchfield" type="text" placeholder="Search">
<button type="submit" class="btn btn-default"></button>
</form>
</div>
</div>
</div>
</body>
</html>
console.log(json)的输出
{batchcomplete: "", continue: {…}, query: {…}} VM145 jquery.min.js:4 XHR finished loading: GET "en.wikipedia.org/w/…*". send @ VM145 jquery.min.js:4 ajax @ VM145 jquery.min.js:4 (anonymous) @ wiki.html:49 dispatch @ VM145 jquery.min.js:3 q.handle @ VM145 jquery.min.js:3
编辑 这是后续问题的代码。单击事件上的按钮在这样设置时不会更新搜索变量。
$(document).ready(function () {
var search;
$("button").on("click", function () {
search = $("#searchfield").val();
});
按钮单击事件内的搜索 console.log 会显示按钮单击时文本框中的数据已更新，但是按钮单击事件之外的搜索变量的 console.log 会显示，无论如何，文档就绪下设置的搜索变量将被设置为空。我尝试更改名称，以免混淆，但是(正如预期的那样)这什么也没做。
最佳答案
您的按钮 是submit 类型，当在form 中使用时，它将提交表单。
要停止此行为，请在提交按钮的 click 处理程序中使用 preventDefault 方法。
// pass the parameter "e" for the event
$("button").on("click", function (e) {
e.preventDefault();
// rest of the code
// ...
});
这是一个演示:
$(document).ready(function() {
// search parameter provided by user started with
// var search;
$("button").on("click", function(e) {
e.preventDefault();
// use .val(), .text() did not do the job
var search = $("#searchfield").val();
console.log(search);
// AJAX request options for WikiMedia API
var ajaxOptions = {
crossDomain: true,
dataType: "json",
url: "https://en.wikipedia.org/w/api.php",
method: "GET",
data: {
action: "query",
format: "json",
titles: search,
list: "search",
srsearch: search,
srprop: "snippet",
srlimit: "100",
origin: "*"
}
};
console.log(ajaxOptions);
$.ajax(ajaxOptions).done(updateDOM);
});
function updateDOM(json) {
$("#json-text").html(JSON.stringify(json));
}
});.container {
height: 50vh;
align-items: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<form>
<input id="searchfield" type="text" placeholder="Search">
<button type="submit" class="btn btn-default">search</button>
</form>
</div>
<div class="row">
<div id="json-text" class="col-md-12"> </div>
</div>
</div>
</div>关于javascript - 单击按钮时的 AJAX 请求不更新 DOM，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47619634/