通过Ajax在php中加载当前页面

Question

我的ajax脚本有问题，我需要加载页面而不刷新页面。 基于此代码。

的index.php

<div class="header-page" class="clearfix" role="banner">
        <div class="container">
            <img src="images/logo.png" />
        </div>             
    </div>
    <!-- end of HEADER -->
    <form>
    <div id="contents">
    <div class="main-container">
        <div class="container">
            <table id="tableID">
                <tr class="data-head">
                    <td>Name</td>
                    <td>Phase</td>
                    <td>Money 1</td>
                    <td>Money 2</td>
                    <td>Money 3</td>
                </tr>
            <?php   
                while ($row = mysql_fetch_row($result, MYSQL_BOTH)) {
                  $id = $row[0];
                  $companyname = $row[1];
                  $client = $row[2];
                  $package = $row[3];
                  $payment1 = $row[4];
                  $payment2 = $row[5];
                  $payment3 = $row[6];


                  echo '<tr id="'.$id.'">';
                  echo '<td><b>'.$client.'</b></td>';
                  echo '<td>';
                  echo '<select class="phase" onchange="trackPhases(this.value)">';        
                           if($phase_status=='Design'){
                            echo '<option value="'.$phase_status.''.$id.'" selected>'.$phase_status.'</option>';
                            echo '<option value="Build-Out'.$id.'">Build-Out</option>';
                            echo '<option value="Launch'.$id.'">Launch</option>';
                           }
                           if($phase_status=='Build-Out'){
                            echo '<option value="Design'.$id.'">Design</option>';
                            echo '<option value="'.$phase_status.''.$id.'" selected>'.$phase_status.'</option>';
                            echo '<option value="Launch'.$id.'">Launch</option>';
                           }
                           if($phase_status=='Launch'){
                            echo '<option value="Design'.$id.'">Design</option>';
                            echo '<option value="Build-Out'.$id.'">Build-Out</option>';
                            echo '<option value="'.$phase_status.''.$id.'" selected>'.$phase_status.'</option>';
                           }
                  echo  '</select>';
                  echo  '</td>';
                  echo '</tr>';
                }
            ?>  
            </table>

        </div>
    </div>
    </div>
    </form>
    <div id="txtHint"></div>

这是我的Ajax脚本。 我在html表格代码上创建了一个下拉控件（只是一个示例）。 当我在下拉列表中选择一个值时- select class="phase" onchange="trackPhases(this.value) ，它应该通过Ajax自动加载页面，而不是刷新。

<script type="text/javascript">
function trackPhases(str)
    {
        if (str=="")
    {
        document.getElementById("txtHint").innerHTML="";
        return;
    } 
    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("txtHint").innerHTML=xmlhttp.responseText;
            }
        }


    xmlhttp.open("GET","update.php?q="+str,true);
    xmlhttp.send();

}

我的index.php很好。 但是我的Ajax脚本有问题。 请帮我。

编辑：

<?php
  mysql_connect("localhost", "xx", "password");
  mysql_select_db('database');

  $query = "SELECT * FROM project";
  $result = mysql_query($query);

  ?>

编辑

编辑 update.php

<?php
 mysql_connect("localhost", "xx", "password");
 mysql_select_db('database');

 $query = "SELECT * FROM project";
 $result = mysql_query($query);

 $q = $_GET['q'];

 $id = ereg_replace("[^0-9]", "",$q);
 $phase_status = preg_replace('/[0-9]+/', '', $q);

 $sql = 'UPDATE project SET phase_status="'.$phase_status.'" WHERE id = '.$id;

 $retval = mysql_query($sql);
 if(! $retval ){
  die('Could not update data: ' . mysql_error());
 }

 ?>

Answer 1

我说这只是为了注意。

* 请使用PDO或mysqli *

我对mysql_query()使用仅适合您的代码

---

如果您提供给我们的update.php代码就像我们可以看到的那样。

当您不发送任何输出时，您将无法获得可以替换的响应！

的index.php

<script type="text/javascript">
function trackPhases(str)
{
....
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
        document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
      }
  }
....

xmlhttp.open("GET","update.php?q="+str,true);
xmlhttp.send();

update.php

.... 
$sql = 'UPDATE project SET phase_status="'.$phase_status.'" WHERE id = '.$id;

 $retval = mysql_query($sql);
 if(! $retval ){
  die('Could not update data: ' . mysql_error());
 }

您将获得的唯一输出是发生错误时：

输出：

'Could not update data: ' . mysql_error());

并立即终止您的脚本..

因此，您的问题Load the current page via Ajax in php与您要获取的内容无关。

你想替换整个

<table id="tableID">
....
<?php   
  while ($row = mysql_fetch_row($result, MYSQL_BOTH)) {
....
</table>

table: project的新内容table: project 。

---

只是一个提示：

你可以放在上面

<table id="tableID">
....
<?php   
  while ($row = mysql_fetch_row($result, MYSQL_BOTH)) {
....
</table>

带有功能的额外include setSelect.php中的代码

<?php 
function getSelect($result) {
?>
   <table id="tableID">
   ....
<?php   
   while ($row = mysql_fetch_row($result, MYSQL_BOTH)) {
?>
   </table> 
}

在index.php中，您的代码成为

<?php
include "setSelect.php";
....
?>
<div class="main-container">
    <div id="newCont" class="container">
       <?php  getSelect($result); ?>
    </div>
</div>

....
?>

update.php

<?php
include "setSelect.php";
 .... 
 $sql = 'UPDATE project SET phase_status="'.$phase_status.'" WHERE id = '.$id;

 $retval = mysql_query($sql);
 if(! $retval ){
  die('Could not update data: ' . mysql_error());
 }
 $query = "SELECT * FROM project";
 $result = mysql_query($query);
 if ($result) {
  getSelect($result);
 }
?>

现在，您必须将getElementById()更改为

document.getElementById("newCont").innerHTML=xmlhttp.responseText;

匹配新创建的容器id 。

我保证你知道我的意思。