Ajax未在DOM中加载内容

Question

而不是在html中填充“ tempDiv”，而是加载显示内容的print.php。 相同的代码适用于其他文件和javascript函数。 ：/

HTML：

 <li><a class="button black" href="#searchbox" onclick="viewall()" >View All</a></li>
 <li><button class="button black" type="submit" form="selectcol" onclick="printDiv()"></button></li>
      <div id="searchresults"  style="padding-top:30px; padding-bottom:10px; max-height:280px; ">
     The results will show up here..!!
     </div>

  <div id="tempDiv"></div>

viewall（）函数：

function viewall(){

var xmlhttp;

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  /*
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("searchresults").innerHTML=xmlhttp.responseText;
    }
  }*/



  xmlhttp.open("POST", "viewall.php", true);            // set the request
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");            // adds  a header to tell the PHP script to recognize the data as is sent via POST
  xmlhttp.send();       // calls the send() method with datas as parameter

  // Check request status
 // If the response is received completely, will be transferred to the HTML tag with tagID
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
      document.getElementById("searchresults").innerHTML = xmlhttp.responseText;
    }
  }

}

调用printDiv（）函数以打印选定的列：

function printDiv()
{

var xmlhttp;

if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  /*
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("searchresults").innerHTML=xmlhttp.responseText;
    }
  }*/



  xmlhttp.open("POST", "print.php", true);          // set the request
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");            // adds  a header to tell the PHP script to recognize the data as is sent via POST
  xmlhttp.send();       // calls the send() method with datas as parameter

  // Check request status
 // If the response is received completely, will be transferred to the HTML tag with tagID
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {
      document.getElementById("tempDiv").innerHTML = xmlhttp.responseText;
    }
  }



}

PHP的：

<?php

$col = $_POST['print'];

$flds = "";
foreach($col as $value){

if(isset($col)){
if($flds !="") 
$flds .= ",";
$flds .= $value;
}

}

$sql = "SELECT ". $flds." from student";



$con = mysqli_connect("localhost", "root", "","university") or die("could not connect". mysqli_error($con));
$rs = mysqli_query($con, $sql);


echo "<table border='1'";

while($r = mysql_fetch_array($rs)){

                            echo "<tr>";
                            echo "<td class='searchtabledata'>".$r[0]."</td>";
                            echo "<td class='searchtabledata'>".$r[1]."</td>";
                            echo "</tr>";

                }                           



?>

我点击提交按钮得到的结果

Answer 1

您是否应该在发送请求之前定义readystate函数？

第2部分。看起来您的printdiv函数提交了一个表单。 如果您使用严格的AJAX程序，则应该能够删除表单标签。 您需要调整其他一些条件才能使其正常工作。