duandi1919 2018-02-27 03:21
浏览 70

AJAX响应不显示文本

Im a beginner with php and 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). 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. Below is my html code:

<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
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

</div>
  • 写回答

1条回答 默认 最新

  • dongyu7074 2018-02-27 05:03
    关注

    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.

    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.

    Try this one, your php file should look like

        <?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>

<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>

    </div>
    评论

报告相同问题？

悬赏问题

  • ¥15 Vue3 大型图片数据拖动排序
  • ¥15 划分vlan后不通了
  • ¥15 GDI处理通道视频时总是带有白色锯齿
  • ¥20 用雷电模拟器安装百达屋apk一直闪退
  • ¥15 算能科技20240506咨询（拒绝大模型回答）
  • ¥15 自适应 AR 模型 参数估计Matlab程序
  • ¥100 角动量包络面如何用MATLAB绘制
  • ¥15 merge函数占用内存过大
  • ¥15 使用EMD去噪处理RML2016数据集时候的原理
  • ¥15 神经网络预测均方误差很小 但是图像上看着差别太大