Php jQuery AJAX表单未发布结果

我在使用AJAX从数据库返回结果时遇到问题。我尝试回显

$diskspace

和

$price

，这两个都返回未定义

diskspace: $("#diskspace").val(),

index.php

<form id="form" method="POST">
    Diskspace:
    <select id="Diskspace">
        <option value="0 AND 1">$0 - 1GB</option>
        <option value="1 AND 5">$1 - 5GB</option>
        <option value="5 AND 10">$5 - 10GB</option>     
    </select></br></br> 
    Price:
    <select id="Price">
        <option value="0 AND 5">$0 - $5</option>
        <option value="1 AND 5">$5 - $10</option>
        <option value="10 AND 20">$10 - $20</option>
        <option value="20 AND 40">$20 - $40</option>
        <option value="40 and 500">>$40</option>            
    </select></br></br> 
    <input type="submit" id="submit" value="enter">
</form> 
<div id="output"></div>

diskspace: $("#diskspace").val(),

磁盘空间：
0-1GB美元
1-5GB美元
$5-10GB



价格：
$0 - $5
$5 - $10
$10 - $20
$20 - $40
>$40            

JS

$(document).ready(function(){

    $("div#output").hide();
    $("#submit").click(function(){
        $.post('join.php', {
            diskspace: $("#diskspace").val(),
            price: $("#price").val() 
        },
        function(data){
            $("div#output").html(data); 
            $("div#output").show();     
        }
        );
        return false;
    });     
});
</script>

diskspace: $("#diskspace").val(),

$（文档）.ready（函数（）{
$（“div#output”）.hide（）；
$（“#提交”）。单击（函数（）{
$.post（'join.php'{
diskspace:$（“#diskspace”）.val（），
价格：$（“#价格”）.val（）
},
功能（数据）{
$（“div#output”）.html（数据）；
$（“div#output”）.show（）；
}
);
返回false；
});     
});

join.php

<?php
if (isset($_POST['diskspace'])){
mysql_connect("localhost","root","") or die('Could not connect');
mysql_select_db("webhost") or die ('Could not find DB');

$diskspace = $_POST['diskspace'];
$price =$_POST['price'];

$query =  mysql_query("
    SELECT * FROM data WHERE Diskspace BETWEEN $diskspace
    AND Price BETWEEN $price 
");

$count = mysql_num_rows($query);

if ($count == 0){
        $output = "No such results, sorry.";
    }else{
        while($row = mysql_fetch_array($query)){
            $diskspace = $row['Diskspace'];
            $price = $row['Price'];
            $host = $row['Provider'];
            $output .= '<div>'.$host.'  '.$diskspace.'  '.$price.'</div>'; 
        }
}
echo $output;
}
?>

diskspace: $("#diskspace").val(),

---

您没有提供您的

的姓名：

<select id="Diskspace" name="Diskspace">
                       ^^^^^^^^^^^^^^^^--- missing

diskspace: $("#diskspace").val(),

^^^^^^^^^^^^^^^^---失踪

没有名称，该字段没有表单提交<代码>id不计算在内-它仅用于DOM操作，与表单提交无关

diskspace: $("#diskspace").val(),

---

除此之外，您还容易受到攻击。

您的HTML元素的id为

Diskspace

，您正在查找

Diskspace

的元素

diskspace: $("#diskspace").val(),

以以下为例：

<select id="Diskspace">
    <option value="hello">hello</option>
</select>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    console.log( $('#diskspace').val() );
});
</script>

diskspace: $("#diskspace").val(),

你好
$（函数（）{
log（$（'#diskspace'）.val（））；
});

结果是未定义的，在jQuery的新版本中，如果找不到元素，它将不会通过ajax/post传递变量

diskspace: $("#diskspace").val(),

---

这同样适用于您的

Price

元素。

您的选择id在jquery中不相同。更改如下：

 <form id="form" method="POST">
        Diskspace:
        <select id="diskspace">
            <option value="0 AND 1">$0 - 1GB</option>
            <option value="1 AND 5">$1 - 5GB</option>
            <option value="5 AND 10">$5 - 10GB</option>     
        </select></br></br> 
        Price:
        <select id="price">
            <option value="0 AND 5">$0 - $5</option>
            <option value="1 AND 5">$5 - $10</option>
            <option value="10 AND 20">$10 - $20</option>
            <option value="20 AND 40">$20 - $40</option>
            <option value="40 and 500">>$40</option>            
        </select></br></br> 
        <input type="submit" id="submit" value="enter">
    </form> 
    <div id="output"></div>

diskspace: $("#diskspace").val(),

磁盘空间：
0-1GB美元
1-5GB美元
$5-10GB



价格：
$0 - $5
$5 - $10
$10 - $20
$20 - $40
>$40            

更换：

diskspace: $("#diskspace").val(),

与

diskspace: $("#diskspace").val(),

---

关于SQL，这只是一个模型，我稍后会加强。他通过ajax传递元素值，并使用ID捕获值，因此不需要使用name属性。这是一个简单的DOM元素拼写错误的例子。@David为什么？它在本地服务器上，而不是在线。我只是在测试AJAX功能。避免MYSQL注入并不难，只是解决问题（比如我刚刚遇到的问题）更难。@JackWilliams：因为这是习惯问题。即使在进行原型设计时，您也希望保持良好的设计和编码实践。在实现一项功能时，您首先想到的应该是正确的方法。即使只是一个一次性的概念验证，坏代码也有通过坏编程习惯进入生产系统的历史。谢谢，全面的回答，犯了一个多么恼人的错误。哈哈