在使用javascript的Ajax方面遇到了困难
having hard time with Ajax using javascript
我试图使用javascript用ajax在xml文件中打印书名、价格和日期。我花了将近两天的时间在它上，并在youtube上看了一些视频，发现我做不到。我不知道我哪里做错了。如果你能帮我，你让我过得很好。谢谢。
$(document).ready(function() {
$("#find").click(function() {
var book = $("#book").val();
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.status == 200) {
document.getElementById('forPrice').innerHTML = 'Test1';
var i;
var xmlDoc = xhttp.responseXML;
var x = xmlDoc.getElementsByTagName("book");
for (i = 0; i < x.length; i++) {
catalog + = xmlDoc[i].getElementsByTagName("price")[0].childNodes[0].nodeValue);
document.getElementsById("#forPrice").innerHTML(catalog);
xmlDoc[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
document.getElementsById("#forBookInformation").innerHTML(catalog);
xmlDoc[i].getElementsByTagName("data")[0].childNodes[0].nodeValue);
document.getElementsById("#forPublishDate").innerHTML(catalog);
});
}
};
xhttp.open("POST", "books.xml", true);
xhttp.send();
})
})<?xml version="1.0"?>
<catalog>
<book>
<author>Gambardella, Matthew</author>
<title>XML Developer's Guide</title>
<price>44.95</price>
<date>2000-10-01</date>
<description>An in-depth look at creating applications
with XML.</description>
</book>
<book>
<author>Ralls, Kim</author>
<title>Midnight Rain</title>
<price>5.95</price>
<date>2000-12-16</date>
<description>A former architect battles corporate zombies,
an evil sorceress, and her own childhood to become queen
of the world.</description>
</book>
<book>
<author>Corets, Eva</author>
<title>Oberon's Legacy</title>
<price>5.95</price>
<date>2001-03-10</date>
<description>In post-apocalypse England, the mysterious
agent known only as Oberon helps to create a new life
for the inhabitants of London. Sequel to Maeve
Ascendant.</description>
</book>
<book>
<author>Thurman, Paula</author>
<title>Splish Splash</title>
<price>4.95</price>
<date>2000-11-02</date>
<description>A deep sea diver finds true love twenty
thousand leagues beneath the sea.</description>
</book>
<book>
<author>Knorr, Stefan</author>
<title>Creepy Crawlies</title>
<price>4.95</price>
<date>2002-10-01</date>
<description>An anthology of horror stories about roaches,
centipedes, scorpions and other insects.</description>
</book>
</catalog><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Books</title>
<style type="text/css">
table,
td {
border: 1px solid black;
}
</style>
<script src="jquery-1.11.2.js"></script>
<script src="p3.js"></script>
</head>
<body>
<h1>Books</h1>
<h2>Book Price</h2>
<form action="" method="post">
<select name="book" id="book">
<option value="XML Developer's Guide">XML Developer's Guide</option>
<option value="Midnight Rain">Midnight Rain</option>
<option value="Oberon's Legacy">Oberon's Legacy</option>
<option value="Splish Splash">Splish Splash</option>
<option value="Creepy Crawlies">Creepy Crawlies</option>
</select>
Select a book to see the price
<br>
<br>
<input type="button" id="find" value="Find!">
</form>
<div id="forPrice"></div>
<h2>Author Names and Book Titles</h2>
<div id="forBookInformation"></div>
<h2>Book Publish Date</h2>
<div id="forPublishDate"></div>
<body>
</html>ajax使用javascript。我花了将近两天的时间在它上，并在youtube上看了一些视频，发现我做不到。我不知道我哪里做错了。如果你能帮我，你让我过得很好。谢谢。
您的代码有很多错误。让我解释一下在哪里和什么：
- 我将"POST"更改为"GET"
xhttp.open("GET", "books.xml", true); document.getElementsById是错误的，因为只有一个id，所以应该是：document.getElementById- 如果使用
jQuery，语法将为$('#forPrice')，但由于使用本机JS，必须省略#，即document.getElementById('forPrice')->请注意缺少# - 由于您使用的是原生JS（而不是jQuery），innerHTML是一个属性，因此您需要按原样使用它（即不是
.innerHTML('text')，而是.innerHTML = 'text'） - 在串联中只使用一个变量，只会将文本添加到一个值中。。所以我从
catalog更改为特定值（如果您喜欢，可以恢复此更改） - 有许多CCD_ 12是不允许的
总而言之，我更改的内容并不完全正确，但至少数据已经加载。但是，由于您没有检查从select选项元素中选择了什么，因此数据会被覆盖。
希望这能帮助你朝着正确的方向前进！
这是工作示例的链接。http://plnkr.co/edit/4TrjfX4LI8234lFVwIyU?p=info
我假设您非常了解ajax。
var data = "<?xml version='1.0'?> <catalog> <book> <author>Gambardella, Matthew</author> <title>XML Developer's Guide</title> <price>44.95</price> <date>2000-10-01</date> <description>An in-depth look at creating applications with XML.</description> </book> <book> <author>Ralls, Kim</author> <title>Midnight Rain</title> <price>5.95</price> <date>2000-12-16</date> <description>A former architect battles corporate zombies, an evil sorceress, and her own childhood to become queen of the world.</description> </book> <book> <author>Corets, Eva</author> <title>Oberon's Legacy</title> <price>5.95</price> <date>2001-03-10</date> <description>In post-apocalypse England, the mysterious agent known only as Oberon helps to create a new life for the inhabitants of London. Sequel to Maeve Ascendant.</description> </book> <book> <author>Thurman, Paula</author> <title>Splish Splash</title> <price>4.95</price> <date>2000-11-02</date> <description>A deep sea diver finds true love twenty thousand leagues beneath the sea.</description> </book> <book> <author>Knorr, Stefan</author> <title>Creepy Crawlies</title> <price>4.95</price> <date>2002-10-01</date> <description>An anthology of horror stories about roaches, centipedes, scorpions and other insects.</description> </book> </catalog>";
$(document).ready(function() {
var getBookByTitle = function(title){
var bookElement = undefined;
var xmlDoc = $.parseXML( data ),
xml = $(xmlDoc),
catalog = xml.find( "catalog" );
$.each(catalog.find('book'), function(i, book){
if($(book).find("title").text() == title){
bookElement = {};
bookElement.author = $(book).find("author").text();
bookElement.title = $(book).find("title").text();
bookElement.price = $(book).find("price").text();
bookElement.date = $(book).find("date").text();
}
});
return bookElement;
};
$("#find").click(function() {
var searchBook = $("#book").val();
var bookElement = getBookByTitle(searchBook);
$("#forPrice").text(bookElement.price);
$("#forBookInformation").html("<i>"+ bookElement.author +","+bookElement.title +"</i>");
$("#forPublishDate").text(bookElement.date);
});
});<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>Books</h1>
<h2>Book Price</h2>
<form action="" method="post">
<select name="book" id="book">
<option value="XML Developer's Guide">XML Developer's Guide</option>
<option value="Midnight Rain">Midnight Rain</option>
<option value="Oberon's Legacy">Oberon's Legacy</option>
<option value="Splish Splash">Splish Splash</option>
<option value="Creepy Crawlies">Creepy Crawlies</option>
</select>
Select a book to see the price
<br>
<br>
<input type="button" id="find" value="Find!">
</form>
<div id="forPrice"></div>
<h2>Author Names and Book Titles</h2>
<div id="forBookInformation"></div>
<h2>Book Publish Date</h2>
<div id="forPublishDate"></div>
</body>
</html>相关文章：
- 将PHP变量传递给jQuery时遇到问题
- 我的jQuery插件参数没有正确启动，遇到了问题
- 在AJAX回调和呈现PIXIJS之间处理程序流时遇到了问题
- 将jQuery转换为用户脚本的普通Javascript时遇到问题
- 如何在服务、技能、投资组合等方面添加滑动效果
- 将子文档推送到父数组时遇到问题
- Typescript在语法方面与es6/es7有多大不同
- JQuery FullCalendar在从ajax成功调用rerenderEvents时遇到问题
- regex来构建字符串，直到遇到第N个匹配项
- 遇到错误后，更改检测似乎中断
- 在将javascript附加到我的html中时遇到问题
- 遇到400错误请求(Angular+WebAPI）的问题
- 在使用javascript的Ajax方面遇到了困难
- 我做了一个Javascript滑块和I'我在CSS方面遇到了一些严重的问题
- 在性能方面遇到困难时，我该如何将其更改为用于循环
- 在for循环数组检查和JSON变量方面遇到问题
- 在Joomla上使用自定义滑块，它在我的机器上运行良好，在托管方面遇到了麻烦
- I'在D3.js中使用工具提示(或标签?）时，我在格式化方面遇到了问题
- 在javascript sort(）顺序方面遇到问题
- 在“嘶嘶声”和“非”选择器方面遇到问题
