简单的ajax脚本来显示书的名字 [英] Simple ajax script to display a book's name
问题描述
我开始学习Ajax，我做了这个简单的HTML页面，它显示一个用户输入，当他用ajax键入一本书的名字（存储在php文件中的一个数组中）时，用户可以在下面看到输入结果，而他键入，这是我无法做到的部分，这是代码：
<！DOCTYPE html>
< html>
< head>
< script type =text / javascriptsrc =bookstore.js>< / script>
< link rel =stylesheethref =style.css>
< / head>
< body onload =process（）>
< h1>
哈德米的书店！
< / h1>
输入您要订购的书
< input type =textid =userInput>
< div id =underInput> < / DIV>
< / body>
< / html>
这是JS文件
// 3函数：创建一个对象，进行通信和响应
var xmlHttp = createXmlHttpRequestObject（）;
函数createXmlHttpRequestObject（）
{
var xmlHttp;
if（window.ActiveXObject）
{
try
{
xmlHttp = new ActiveXObject（Microsoft.XMLHTTP）; //检查IE
}
catch（e）
{
xmlHttp = false;
else
{
try
{
xmlHttp = new XMLHttpRequest（）; //！ IE
}
catch（e）
{
xmlHttp = false;
$ b $ if（！xmlHttp）
alert（Can not Create that object）;
else
return xmlHttp;
}
功能处理（）
{
如果（xmlHttp.readyState == 0 || xmlHttp.readyState == 4）
{
book = encodeURIComponent（document.getElementById（userInput）。value）;
xmlHttp.open（GET，book.php？book =+ book，true）;
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send（null）;
}
else
{
setTimeout（'process（）'，1000）;
}
}
功能handleServerResponse（）
{
//如果（XMLHTTP发送回XML文件
。 readyState == 4）
{
if（xmlHttp.status == 200）
{
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement = xmlResponse.documentElement;
message = xmlDocumentElement.firstChild.data;
document.getElementById（underInput）。innerHTML = message;
setTimeout（'process（）'，1000）;
}
else
{
alert（OOps！出错了！）;
}
}
}
这是PHP文件：
<？php
header（'Content-Type：text / xml'）;
echo'<？xml version =1.0enconding =UTF-8standalone =yes？>';
echo'< response>';
$ book = $ _GET ['book'];
$ bookArray = array（'Book1'，'Book2'，'Book3'）;
if（in_array（$ book，$ bookArray））
echo'We do have'。$ book。'！';
elseif（$ book =''）
echo'输入一个书名白痴！';
else
echo'我们没有'。$ book。'！';
echo'< / response>';
？>
我无法设法显示JS文件应该执行的操作，任何人都知道如何修复编辑：我把所有文件放在Wamp下的www文件夹中。
首先，您有一个拼写错误：
echo'<？xml version =1.0enconding =UTF-8standalone =yes？>';
^n
其中应该读作编码。
将错误设置为显示在您的服务器上会导致以下情况：
XML解析错误：XML声明格式不正确位置： http://www.example.com/book.php?book.php?book= 第1行第21列：
另外，请记住，正如我在评论中指出的那样， Book1 和 book1 不会相同，因此数组键被视为区分大小写。
请参阅Stack上的以下答案：
<
elseif（$ book =''）$您也正在使用单个等号进行分配： b
$ b 而不是比较，它应该包含一个额外的等号：
elseif（$ book ==''）
^^
$ b 参考文献：
另外，确保PHP确实已安装，正在运行并正确配置。
I started learning Ajax and I did this simple HTML page that displays a user input, when he types the name of a book (stored in an array in the php file), using ajax, the user can see below the input the results while he types, this is the part I couldn't manage to do, Here's the code :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="bookstore.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body onload="process()">
<h1>
Hadhemi's BookStore !
</h1>
Enter the book you want to order
<input type="text" id="userInput">
<div id="underInput"> </div>
</body>
</html>
And this is the JS file
// 3 functions : create an object, communicate and response
var xmlHttp=createXmlHttpRequestObject();
function createXmlHttpRequestObject()
{
var xmlHttp;
if(window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //check for IE
}
catch (e)
{
xmlHttp = false;
}
}
else
{
try
{
xmlHttp = new XMLHttpRequest(); // ! IE
}
catch (e)
{
xmlHttp = false;
}
}
if (!xmlHttp)
alert("Can't Create that object");
else
return xmlHttp;
}
function process()
{
if(xmlHttp.readyState==0 || xmlHttp.readyState==4)
{
book = encodeURIComponent(document.getElementById("userInput").value);
xmlHttp.open("GET","book.php?book=" + book,true);
xmlHttp.onreadystatechange = handleServerResponse;
xmlHttp.send(null);
}
else
{
setTimeout('process()',1000);
}
}
function handleServerResponse()
{
//sends back an xml file
if (xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
xmlResponse = xmlHttp.responseXML;
xmlDocumentElement=xmlResponse.documentElement;
message = xmlDocumentElement.firstChild.data;
document.getElementById("underInput").innerHTML= message;
setTimeout('process()',1000);
}
else
{
alert("OOps! Something went wrong!");
}
}
}
And this is the PHP file :
<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" enconding="UTF-8" standalone="yes" ?>';
echo'<response>';
$book = $_GET['book'];
$bookArray = array('Book1','Book2','Book3');
if(in_array($book, $bookArray))
echo 'We do have'.$book.'!';
elseif ($book='')
echo 'Enter a book name idiot!';
else
echo 'We dont have'.$book.'!';
echo'</response>';
?>
I can't manage to display what the JS file is supposed to do, anyone knows how to fix it?
EDIT: I placed all the files in the www folder under Wamp.
There are a few things wrong in what you posted.
Firstly, you have a typo in:
echo '<?xml version="1.0" enconding="UTF-8" standalone="yes" ?>';
^ the "n"
Which should read as encoding.
Having errors set to be displayed on your server would have thrown you the following:
XML Parsing Error: XML declaration not well-formed Location: http://www.example.com/book.php?book.php?book= Line Number 1, Column 21:
Plus, do keep in mind that, and as I stated in comments that Book1 and book1 are not treated the same, therefore the array keys are considered as case-sensitive.
Consult the following answer on Stack:
You're also doing an assignment for while using a single equal sign:
elseif ($book='')
^
rather than a comparison, which should contain an additional equal sign:
elseif ($book=='')
^^
References:
- http://php.net/manual/en/language.operators.assignment.php
- http://php.net/manual/en/language.operators.comparison.php
- http://php.net/manual/en/function.error-reporting.php
Plus, make sure that PHP is indeed installed, running and properly configured.
这篇关于简单的ajax脚本来显示书的名字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
