PHP错误的XmlHttpRequest用简单的待办事项列表

问题描述:

作为新PHP和AJAX的XmlHttpRequest调用干脆,我在努力弄清楚什么是错我的代码。通过文档走了,但似乎我努力把db行names放入一个数组中。我非常希望异步地显示在下方输入innerHTML,表示该项目是否在数据库或没有。现在它显示'未定义',如下所示,直到我输入数据库中的最后一项。它只响应db中的最后一项,这意味着我的循环可能存在问题。欢迎任何帮助。PHP错误的XmlHttpRequest用简单的待办事项列表

enter image description here

enter image description here

的index.php

<?php 
include 'db.php'; 
?> 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
    <link href="css/main.css" rel="stylesheet"> 

    <script 
     src="https://code.jquery.com/jquery-3.2.1.min.js" 
     integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
     crossorigin="anonymous"> 
    </script> 

    <script src="js/todo.js" type="text/javascript"></script> 

    <script> 

    </script> 


</head> 
<body onload="process()"> 
    <div class="list"> 
     <h1 class="header">My To Do</h1> 
     <form> 
      <ul class="items"> 
      <?php 
       $sql = "SELECT * FROM items ORDER BY items.id ASC"; 
       $result = mysqli_query($conn, $sql); 

       if(mysqli_num_rows($result) > 0){ 
        while ($row = mysqli_fetch_assoc($result)){ 
         echo "<li><input type='checkbox' /><label>"; 
         echo $row['name']; 
         echo "</label></li><br>"; 
        } 
       } else { 
        echo "There are no to-dos!"; 
       } 

       echo "<br/><br/>"; 
       echo "<li><input type='checkbox' /><label>Mark all as completed</label></li>"; 
      ?> 
      </ul><br /> 
     </form> 
    </div> 

    <div class="list"> 
     <form class="item-add" method="post"> 
      <input type="text" id="name" name="name" placeholder="Enter new item" class="input" autocomplete="off" required> 
      <input name="myBtn" type="submit" value="Add Item"> 
      <div id="status"></div> 
     </form> 
    </div> 

</body> 

item.php

<?php 
include 'db.php'; 
header('Content-Type: text/xml'); 
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>'; 

echo '<response>'; 
    if (mysqli_connect_errno()) { 
     printf("Connect failed: %s\n", mysqli_connect_error()); 
     exit(); 
    } 

    $sql = "SELECT * FROM items ORDER BY items.id ASC"; 
    $result = mysqli_query($conn, $sql); 
    $itemArray = array(); 

    $rowNum = mysqli_num_rows($result); 

    //is this the correct way to add db items to an array? 
    if($rowNum > 0){ 
     while ($row = mysqli_fetch_assoc($result)){ 
      for ($x = 0; $x <= $rowNum; $x++) { 

       $itemArray[$x] = $row['name']; 
      } 

     } 

    } else { 
     echo "There are no to-dos!"; 
    } 

    $entry = $_GET['name']; 
    if(in_array($entry, $itemArray)) 
     echo 'Item ' .$entry. ' already exists! Please enter a new item...'; 
    elseif ($name == '') 
     echo "Please enter an item..."; 
    else { 
     //code for insertion 
      echo "Successfully Inserted"; 

    } 

echo '</response>'; 

?> 

item.js

var xmlHttp = createXmlHttpRequestObject(); 

function createXmlHttpRequestObject() { 
    var xmlHttp; 

    if(window.ActiveXObject) { 
     try { 
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } catch(e) { 
      xmlHttp = false; 
     } 
    } else { 
     try { 
      xmlHttp = new XMLHttpRequest(); 
     } catch(e) { 
      xmlHttp = false; 
     } 
    } 

    if(!xmlHttp) { 
     alert("cant create that object hoss"); 
    } else { 
     return xmlHttp; 
    } 

} 

function process() { 
    if (xmlHttp.readyState==0 || xmlHttp.readyState==4) { 
     name = encodeURIComponent(document.getElementById('name').value); 
     xmlHttp.open("GET", "item.php?name="+name, true); 
     xmlHttp.onreadystatechange = handleServerResponse; 

     xmlHttp.send(null); 
    } else { 
     setTimeout('process()', 1000); 
    } 
} 

function handleServerResponse(){ 
    if(xmlHttp.readyState==4) { 
     if(xmlHttp.status==200){ 
      xmlResponse = xmlHttp.responseXML; 
      xmlDocumentElement = xmlResponse.documentElement; 
      console.log(xmlResponse.documentElement); 
      message = xmlDocumentElement.firstChild.data; 
      document.getElementById('status').innerHTML = 
      '<span style="color:blue">' + message + '</span>'; 
      setTimeout('process()', 1000); 
     } else { 
      alert('Something went wrong!'); 
     } 
    } 

} 
+0

什么是'的console.log打印(xmlDocumentElement.firstChild.data)' – Niladri

+0

@Niladri从'item.php'呼应 “请输入项目” 一个循环''标签。当我在字段中输入'ssd'时,它会以正确的响应循环,例如'Item ssd'已经存在!请输入一个新项...';' –

+0

检查以下 – Niladri

$name没有在你的PHP文件中定义的,不如果它是$entry您在elseif条件之下

$entry = $_GET['name']; 
if(in_array($entry, $itemArray)) 
    echo 'Item ' .$entry. ' already exists! Please enter a new item...'; 
elseif ($entry == '') 
    echo "Please enter an item..."; 
else { 
    //code for insertion 
     echo "Successfully Inserted"; 

} 

也是正确的方法来检查将数据库列分配给数组应该如下所示。

if($rowNum > 0){ 
     while ($row = mysqli_fetch_assoc($result)){ 

       $itemArray[] = $row['name']; 
     } 

    } else { 
     echo "There are no to-dos!"; 
    } 
+0

我的回答在'elseif'。很好的接收。 – Styx

+0

@Styx更新我的回答,也许是其他值甚至没有推到阵列 – Niladri

+0

哦,是感谢指出了这一点。现在部分修复。它仍然不表示例如,当我在字段中输入时,“db”中已经存在“Football”。 –