的jQuery和JavaScript AJAX数据库查询

Question

我似乎与这些混账AJAX的MySQL查询没有运气...

我想查询时，从下拉菜单中作出选择的数据库，并填写一个div与脚本的结果。我尝试了两种不同的方式，无论是时间还是运气。

方法1

的Javascript

var ajaxRequest; 
var create_url = "create_script.php"; 
var process_url = "process.php"; 
try{ 
    ajaxRequest = new XMLHttpRequest(); 
} catch (e){ 
    try{ 
     ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
    } catch (e) { 
     try{ 
      ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
     } catch (e){ 
      alert("Your browser broke!"); 
     } 
    } 
} 

function races(id) 
{ 
    ajaxRequest.onreadystatechange = function() 
    { 
     if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){ 
      document.getElementById('race_info').innerHTML = ajaxRequest.responseText; 
     } 
    } 
    var params = "mode=race&id="+id; 
    ajaxRequest.open("POST", create_url, true); 
    ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    ajaxRequest.setRequestHeader("Content-length", params.length); 
    ajaxRequest.setRequestHeader("Connection", "close"); 
    ajaxRequest.send(params); 
} 

function classes(id) 
{ 
    ajaxRequest.onreadystatechange = function() 
    { 
     if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200){ 
      document.getElementById('class_info').innerHTML = ajaxRequest.responseText; 
     } 
    } 
    var params = "mode=classes&id="+id; 
    ajaxRequest.open("POST", create_url, true); 
    ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    ajaxRequest.setRequestHeader("Content-length", params.length); 
    ajaxRequest.setRequestHeader("Connection", "close"); 
    ajaxRequest.send(params); 
} 

页面正文：

<div id="contentwrapper"> 
    <div id="contentcolumn"> 
     <div class="innertube"> 
      <?php 
      if($step == 0) 
      { 
      ?> 
      <form action="<?php echo $u_create; ?>" method="post"> 
       <h2>Races</h2> 
       <select id="race_select" name="race_select"> 
        <?php 
        $sql = 'SELECT * FROM '.RACES_TABLE; 
        $result = $db->sql_query($sql); 
        while($row = $db->sql_fetchrow($result)) 
        { 
         echo '<option onfocus="races('.$row['race_id'].');" value="'.$row['race_id'].'">'.$row['race_name'].'</option>'."\n"; 
        } 
        ?> 
       </select> 
       <h2>Classes</h2> 
       <select id="class_select" name="class_select"> 
        <?php 
        $sql = 'SELECT * FROM '.CLASSES_TABLE; 
        $result = $db->sql_query($sql); 
        while($row = $db->sql_fetchrow($result)) 
        { 
         echo '<option onfocus="classes('.$row['race_id'].');" value="'.$row['class_id'].'">'.$row['class_name'].'</option>'."\n"; 
        } 
        ?> 
       </select> 
       <br /> 
       <input type="submit" value="Select" name="submit" /> 
      </form> 
      <br /> 
      <div id="race_info"></div> 
      <br /> 
      <hr /> 
      <br /> 
      <div id="class_info"></div> 
      <?php 
      } 
      ?> 
     </div> 
    </div> 
</div> 

方法2

AJAX

$(document).ready(function() { 
    $("#race_select").change(function() { 
     var race = $("#race").val(); 
     $.ajax({ 
      url: 'create_script.php', 
      data: 'mode=race&id=' + race, 
      dataType: 'json', 
      success: function(data) 
      { 
       $("#race_info").html(data); 
      } 
     }); 
    }); 

    $("#class_select").change(function() { 
     var class = $("#class").val(); 
     $.post("create_script.php", { mode: "class", id: class }, function(data) { 
      $("#class_info").html(data); 
     }); 
    }); 
}); 

页面正文：

<div id="contentwrapper"> 
    <div id="contentcolumn"> 
     <div class="innertube"> 
      <?php 
      if($step == 0) 
      { 
      ?> 
      <form action="<?php echo $u_create; ?>" method="post"> 
       <h2>Races</h2> 
       <select id="race_select" name="race_select"> 
        <?php 
        $sql = 'SELECT * FROM '.RACES_TABLE; 
        $result = $db->sql_query($sql); 
        while($row = $db->sql_fetchrow($result)) 
        { 
         echo '<option id="race" value="'.$row['race_id'].'">'.$row['race_name'].'</option>'."\n"; 
        } 
        ?> 
       </select> 
       <h2>Classes</h2> 
       <select id="class_select" name="class_select"> 
        <?php 
        $sql = 'SELECT * FROM '.CLASSES_TABLE; 
        $result = $db->sql_query($sql); 
        while($row = $db->sql_fetchrow($result)) 
        { 
         echo '<option id="class" value="'.$row['class_id'].'">'.$row['class_name'].'</option>'."\n"; 
        } 
        ?> 
       </select> 
       <br /> 
       <input type="submit" value="Select" name="submit" /> 
      </form> 
      <div id="race_info"></div> 
      <hr /> 
      <div id="class_info"></div> 
      <?php 
      } 
      ?> 
     </div> 
    </div> 
</div> 

尝试的一点都没有工作过。我不确定我做错了什么。根据萤火虫的说法，在选择选项更改上甚至没有POST请求。

Answer 1

在您的jQuery AJAX请求中，您将dataType设置为JSON。所以jQuery试图解析一次收到的JSON。如果失败，没有任何反应。甚至没有在Firebug中显示的请求。

如果您在AJAX返回中使用html，则应该将dataType设置为HTML。

编辑

哦，在你的jQuery文件中的第二个请求，你在做var class = $("#class").val();。你可能想避免与保留的名字命名的增值经销商：http://www.quackit.com/javascript/javascript_reserved_words.cfm

EDIT2

由于@pthurlow注意到，有一个大的失败，你的ID名。您试图获得#race选择，但HTML中没有race ID。有一个#race_select，但它不同于#race。 它也与您的#class东西失败。

Answer 2

对于初学者来说，在方法二中，所有选择的选项都有相同的ID。因此在查询时：

var race = $("#race").val(); 

您将始终得到第一个选项。

相反，在change函数内，this将引用所选元素。所以：

var race = $(this).val(); 

会得到你想要的东西

编辑

下面是使用你的代码演示中的jsfiddle表格所需的行为一个简单的例子：http://jsfiddle.net/7Xtqv/1/

希望帮助