Question

这是我第一次涉足Javascript和AJAX（我正在阅读JavaScript和JQuery，The Missing Manual）。我编写了这段代码，试图将数据从使用AJAX的表单发送到查询数据库的php文件（查询工作正常的phpMyAdmin），返回数据并使用Javascript在屏幕上显示以附加div。

我的关键点是让AJAX与服务器php页面一起工作。我也想知道是否有一些步骤可以检查我的代码是否正常工作。

这是我到目前为止所写的内容，感谢您的帮助和见解：

<html>
<head>
<meta charset="UTF-8">
<title>Sidework Review Screen</title>
<link href="./_resources/_css/site.css" rel="stylesheet">
<script src="./_resources/_js/jquery-1.7.2.min.js"></script>

<script>

$(document).ready(function(){
$("button").click(function(){

//var sw = "testing";
var sw = $("#switcher").val();
var tech = $("#id_techs option:selected").val();

// alert(tech);

    $.post('side_work_controller.php',
        {
        switcher: sw,
        id_techs: tech
        },  
        function(data, status){
        alert("Date: " + data + "\nStatue: " + status);
    }); // end post 
}); //end click 

}); // end ready
</script>
</head>
<body>

<?php
try {
$username = "xxxx";
$password = "xxxx";
$dbh = new PDO('mysql:host=10.5.44.12;dbname=SideProjects', $username, $password);
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}

$sth = $dbh->prepare("SELECT DISTINCT tech_fname, tech_lname, extension
                  FROM `techs` ORDER BY tech_lname
                  ");
$sth->execute();
$sql = $sth->fetchAll(PDO::FETCH_ASSOC);
?>
<div id="top"></div>
<div id="dropshadow"></div>
<div id="container">
    <div id="left">
        <div id="logo"><img src="logo.png"></div>
    </div>

    <div id="right">
        <!--<form action="side_work_controller.php" name="switcher" method="post">';-->
        <h1>Sidework Review</h1><p>
        <label for="tech_ids"><h2>Choose a Technician</h2></label><p>

            <select name="id_techs" id="id_techs"> //Builds drop down menu-->
                <?php foreach ($sql as $row){
                    echo '<option value = "' . $row['extension'] . '">' . $row["tech_fname"] . ' ' . $row["tech_lname"] . ' - ' . $row['extension'] . '</option>';
                } ?>
            </select><p>
        <input type="hidden" name="switcher" id="switcher" value="search">  

        <div id="button"><button>Review</button></div>          
    </div>  
 </div>
 <div id="bottom"></div>
</body>
</html>

EDIT:
I've discovered that part of the problem is with my button, it needs to be
<button>Review</button> not 
echo '<input type="submit" id="button" onclick="click()" value="Review">'; 
for this to work.

EDIT:
Also just worked out that the <select> and <input> tags needed id="[id name]" in order to work with the .val() function.

EDIT:
I've written a bit of the AJAX and is does send to the php file and gets some data. 

I am reposting my changes for the benefit of newbie like me. The AJAX doesn't work correctly yet.

Answer 1

正如其他人所说，你忘记在选择器周围添加一些引号。

还有很多其他错误：

你忘记了;数据数组变量初始化后

此代码存在问题：请求完成时$('#container').html(newHTML);在哪里？他不存在。

$.post('side_work_controller.php',data,function(data, status){
        var newHTML = data + '.</P>';
        //$('#container') does not exist at this moment 
        $('#container').html(newHTML);
    }); // end post

您可以改为附加到文档：

$(newHTML).appendTo(document);

正如我在对你的问题的评论中所说，echo '<div id="top"></div>';之类的内容很糟糕：难以理解，难以维护。您的IDE（如果使用IDE）无法检测HTML错误。查看this very interesting post或模板引擎，例如Smarty
php文件末尾的</body>和</html>是什么？如果您选择“回显”您的HTML（我重复的错误选择），请直到最后。

更正此代码并尝试自行调试。通过这种方式我的意思是你应该使用一个javascript调试器：集成的浏览器控制台现在相当不错。您可以使用F12快捷方式访问它。阅读有关它的文档，here for chrome。

希望这有帮助。

Answer 2

定义点击操作时，您的选择器周围缺少引号。

$(#button).click(function(){

变为：

$("#button").click(function(){

如何使用我的php页面使我的AJAX工作？

2 个答案: