html - Ajax从php页面获取内容

Question

嗨，我有一个表，我正在尝试通过在单独的 php 页面中调用 MySQL 数据库来更新该表。这个单独的页面循环遍历结果集并通过一系列回显构建表格。在主页中，我尝试将回显的内容插入到 div 中。

这一切都是由用户从下拉框中选择一个选项开始的。

这是单独的 php 页面。 (当我手动输入GET参数时它工作正常，它是两个页面之间的链接似乎不起作用)

tableGetter.php

<?PHP
$user_name = "rocketeermus_pr";
$password = "zuluhead2";
$database = "rocketeermus_pr";
$server = "pdb1.awardspace.com";

$db_handle = mysql_connect($server, $user_name, $password);
$db_found = mysql_select_db($database, $db_handle);

echo "Bonjour";

if (isset($_GET['composer'])){ 

  echo "Helloooo";

  if ($db_found) {

    echo "SELECT * FROM catalogue WHERE Composer = '".mysql_escape_string($_GET['composer'])."';";
    $SQL = "SELECT * FROM catalogue WHERE Composer = '".mysql_escape_string($_GET['composer'])."';";
    $result = mysql_query($SQL);
    setlocale(LC_MONETARY,"en_GB");

    echo "<table class=\"sortable\" id=\"moder\" width=\"800\">";

    echo "<th>TITLE</th><th>COMPOSER</th><th>VOICING</th><th>PRICE</th><th></th></tr>";
    while ( $db_field = mysql_fetch_assoc($result) ) {
      echo "Hi.";

      echo "<tr><td>{$db_field['Title']}</td><td>{$db_field['Composer']}</td><td>{$db_field['Voicing']}</td><td>";
      echo money_format("%n", $db_field['Price']);
      echo "</td><td> <div class=\"product\"> <input value=\"{$db_field['Title']}\" class=\"product-title\" type=\"hidden\"> <input value=\"0.5\" class=\"product-weight\" type=\"hidden\"> <input value=\"{$db_field['NoVox']}\" class=\"googlecart-quantity\" type=\"hidden\"> <input value=\"{$db_field['Price']}\" class=\"product-price\" type=\"hidden\"> <div title=\"Add to cart\" role=\"button\" tabindex=\"0\" class=\"googlecart-add-button\"> </div> </div> </td></tr>";

    }
    echo "</table>";

    mysql_close($db_handle);

  } else {
    print "Database NOT Found ";
    mysql_close($db_handle);
  }
}

?>

这是主页上的重要内容:

Javascript:

function getdata()
{
    var req = getXMLHTTP();
    if (req)
    {

        //function to be called when state is changed
        var queryString1 = "";
        req.onreadystatechange = function()
        {
            //when state is completed i.e 4
            if (req.readyState == 4)
            {

                var ajaxSearchResults1 = document.getElementById("table");
                ajaxSearchResults1.innerHTML = req.responseText;

                // only if http status is "OK"
                if (req.status == 200)
                {
                    var new1 = document.getElementById('composer').value;
                    queryString1 = "?composer=" + encodeURIComponent(new1);
                    console.log (queryString1);
                }
                else
                {
                    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                }
            }
        }
        req.open("GET", "tableGetter.php" + queryString1, true);
        req.send();
    }
}

function getXMLHTTP() {
    var xmlhttp;

    if(window.XMLHttpRequest){ //For Firefox, Mozilla, Opera, and Safari
        xmlhttp = new XMLHttpRequest();
    }
    else if (window.ActiveXObject){ //For ie
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        if (!xmlhttp){
            xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
    }
    return xmlhttp;
}

html:

<div id="menus">
  <table>
    <tr>
      <td><form action=""">
            <select name="composer" id ="composer" onchange="getdata();"> 
              <?php  
                 $user_name = "***";
                 $password = "****";
                 $database = "****";
                 $server = "****.com";

                 $db_handle = mysql_connect($server, $user_name, $password);
                 $db_found = mysql_select_db($database, $db_handle);

                 if ($db_found) {

                 $SQL = "SELECT DISTINCT Composer FROM catalogue ORDER BY Composer";
                 $result = mysql_query($SQL);
                 setlocale(LC_MONETARY,"en_GB");
                 while ( $db_field = mysql_fetch_assoc($result) ) { 
                 ?> 
              <option id="composer" onchange="getdata();" value="<?php echo $db_field['Composer'];?>"> 
                <?php  
                   echo $db_field['Composer']; 
                   ?> 
              </option> 
              <?php 
                 } 
                 }
                 ?> 
            </select>


      </form></td>
    </tr>
  </table>
</div>

<div id="table"> 
  <?php include("tableGetter.php"); ?>
</div>

主页上的 html 工作正常，下拉菜单很好地填充了数据库中所有不同的 Composer 名称。当选择菜单中的选项时，“table”div 中唯一回显的内容是“Bonjour”。它不会比 tableGetter.php 页面中的 if (isset($_GET['composer'])) 更进一步。我正在打印 getData() 函数中请求的 queryString1 变量(获取参数)，它报告:?composer=Animuccia%2C% 20Paulo 在手动加载页面时效果非常好。它只是无法动态工作!

有人知道这是怎么回事吗？

Answer 1

在发送 AJAX 请求之前，您没有设置 queryString1。尝试重写 getdata()。

function getdata()
{
    var req = getXMLHTTP();
    if (req)
    {
        //function to be called when state is changed
        req.onreadystatechange = function()
        {
            //when state is completed i.e 4
            if (req.readyState == 4)
            {
                // only if http status is "OK"
                if (req.status == 200)
                {
                    var ajaxSearchResults1 = document.getElementById("table");
                    ajaxSearchResults1.innerHTML = req.responseText;
                }
                else
                {
                    alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                }
            }
        }
        var new1 = document.getElementById('composer').value;
        var queryString1 = "?composer=" + encodeURIComponent(new1);
        req.open("GET", "tableGetter.php" + queryString1, true);
        req.send();
    }
}