ajax没有在DOM中加载内容

时间:2013-07-29 16:12:01

标签: php javascript dom

而不是在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>";

                }                           



?>

我点击提交按钮的结果

enter image description here

1 个答案:

答案 0 :(得分:1)

在发送请求之前,您不应该定义readystate函数吗?

第2部分。看起来你的printdiv函数提交了一个表单。如果您使用严格的AJAX过程,则应该能够删除表单标记。你需要调整一些其他的东西才能使它发挥作用。