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過程，您應該能夠移除表單標籤。你需要調整一些其他的東西來完成這項工作。