AJAX响应未显示文本

Question

Im a beginner with php and Javascript. 我是php和Javascript的初学者。 I am trying to make an Ajax request using a JavaScript function to display the country description based on the form text input(country name). 我试图使用JavaScript函数发出Ajax请求，以基于表单文本输入（国家名称）显示国家描述。 The response should come from a .php file which takes in country name as a parameter and produce a response that will consist of a brief description of that country when the user clicks the button. 响应应该来自一个.php文件，该文件以国家/地区名称为参数，并生成一个响应，其中包含用户单击按钮时对该国家的简短描述。 Below is my html code: 以下是我的html代码：

 <html> <head> <script> / var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } function getData(dataSource, divID) { if(XMLHttpRequestObject) { var obj = document.getElementById(divID); obj.innerHTML =""; XMLHttpRequestObject.open("GET", dataSource); XMLHttpRequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { obj.innerHTML = XMLHttpRequestObject.responseText; } } XMLHttpRequestObject.send(null); } } </script> </head> <body> <h1 align="center">Country Description</h1> <form> <p>Country Name: <input type="text" name="country"> <input type="button" value="Show Description" onclick="getData('hw5a.php', 'targetDiv')"> </p> </form> <div id="targetDiv"> <p>The response will display here</p> </div> </body> </html>

Following is my php code: 以下是我的PHP代码：

 <?php header("Cache-Control: post-check=1,pre-check=2"); header("Cache-Control: no-cache, must-revalidate"); header("Pragma: no-cache"); $c = $_GET['country']; $c = strtolower($country); echo $country; if($c = 'canada') { echo '<p>canada</p>'; } elseif($c = 'usa') { echo '<p>USA</p>'; } elseif($c = 'mexico') { echo '<p>c</p>'; } else echo '<p>Please check your spellings</p>' ?>

I am not sure what am i doing wrong. 我不确定我在做什么错。 Any help or direction will be appreciated. 任何帮助或指示，将不胜感激。 Thanks 谢谢

Answer 1

First you should use == or === operator in php and you should test your $_GET variable if exist with isset($_GET['country']) since the variable might not exist and it's recommended for security reasons like SQL Injection. 首先，您应该在php中使用==或===运算符，并且应该使用$_GET isset($_GET['country'])测试$_GET变量是否存在，因为该变量可能不存在，并且出于安全原因（例如SQL注入）建议使用该变量。

In your HTML file, If you don't want to load the page then you can use XHR specifying Your URL hw5a.php?country= , but you must send with it the value of the country like this hw5a.php?country=canada . 在您的HTML文件中，如果您不想加载该页面，则可以使用XHR指定您的URL hw5a.php?country= ，但是您必须随其发送该国家/地区的值，例如hw5a.php?country=canada 。

Try this one, your php file should look like 试试这个，你的php文件应该看起来像

    <?php
header("Cache-Control: post-check=1,pre-check=2");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");

if(isset($_GET['country'])){

$country = $_GET['country'];
$country = strtolower($country);

if($country === 'canada')
{
echo '<p>canada</p>';
}
elseif($country === 'usa')
{
echo '<p>USA</p>';
}
elseif($country === 'mexico')
{
echo '<p>mexico</p>';
}
else 
echo '<p>Please check your spellings</p>';
}

?>

Your HTML 您的HTML

 <html> <head> <script> var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } function getData(divID) { //Define Your URL var dataSource = "hw5a.php?country=" + document.querySelector('#countryInput').value; if (XMLHttpRequestObject) { var obj = document.getElementById(divID); obj.innerHTML = ""; XMLHttpRequestObject.open("GET", dataSource); XMLHttpRequestObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { console.log(XMLHttpRequestObject); obj.innerHTML = XMLHttpRequestObject.responseText; } } XMLHttpRequestObject.send(null); } } </script> </head> <body> <h1 align="center">Country Description</h1> <form> <p>Country Name: <input id="countryInput" type="text" name="country"> <input type="button" value="Show Description" onclick="getData('targetDiv')"> </p> </form> <div id="targetDiv"> <p>The response will display here</p> </div> </body> </html>

AJAX响应未显示文本

问题描述

1 个解决方案

解决方案1
0 2018-02-27 05:03:22

AJAX响应未显示文本

问题描述

1 个解决方案

解决方案1 0 2018-02-27 05:03:22

解决方案1
0 2018-02-27 05:03:22