Fatal编程技术网
  • javascript/
  • Javascript 如何使AJAX与php页面一起工作？

Javascript 如何使AJAX与php页面一起工作？

javascript php jquery ajax

Javascript 如何使AJAX与php页面一起工作？,javascript,php,jquery,ajax,Javascript,Php,Jquery,Ajax,这是我对Javascript和AJAX的第一次尝试（我正在阅读Javascript和JQuery，缺少的手册）。我编写这段代码是为了尝试使用AJAX将数据从表单发送到查询数据库的php文件（查询工作正常phpMyAdmin），返回数据并使用Javascript在屏幕上显示以附加div 我的关键是让AJAX与服务器php页面一起工作。我还想知道我是否可以采取一些步骤来检查我的代码是否正常工作 以下是我迄今为止所写的内容，感谢您的帮助和见解： <html> <head> &l

这是我对Javascript和AJAX的第一次尝试（我正在阅读Javascript和JQuery，缺少的手册）。我编写这段代码是为了尝试使用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. 


侧工作回顾屏幕
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
//var sw=“测试”；
var sw=$（“#切换器”）.val（）；
var tech=$（“#id#u techs option:selected”）.val（）；
//警报（技术）；
$.post（'side\u work\u controller.php'，
{
交换机：sw，
id_techs:tech
},  
功能（数据、状态）{
警报（“日期：+数据+”\n状态：+状态）；
})；//端柱
})；//结束单击
}); // 准备就绪
侧工作回顾
选择技术人员
//构建下拉菜单-->

回顾
编辑：
我发现部分问题在于我的按钮，它需要
不复习
回声'；
为了让它发挥作用。
编辑：
还刚刚计算出and标记需要id=“[id name]”才能使用.val（）函数。
编辑：
我已经编写了一点AJAX，它确实会发送到php文件并获取一些数据。
我重新发布我的更改是为了像我这样的新手。AJAX还不能正常工作。
定义单击操作时，选择器周围缺少引号

$(#button).click(function(){
变成：

$("#button").click(function(){
正如其他人所说，您忘记在选择器周围加上引号

还有许多其他错误：

  • 你忘了一个；数据数组变量初始化后

  • 此代码有一个问题：
    $（'#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
  • 正如我在评论你的问题时所说的，像
    echo'错误：不可读，难以维护。您的IDE（如果您使用IDE）无法检测HTML错误。看看模板，或者像这样的引擎
  • php文件末尾的
    和
    是什么？如果你选择“回显”你的HTML（我重复错误的选择），那就一直做到最后。

更正此代码并尝试自己调试。通过这种方式，我的意思是您应该使用javascript调试器：集成浏览器控制台现在非常好。您可以使用F12快捷方式访问它。阅读有关它的文档

希望这能有所帮助。

对于那些点击我的人来说，这些问题表明我在研究上没有任何努力，我已经花了整个周末和最后两天的时间在工作中阅读并尽可能多地学习这4个主题。我做了很多研究。这是我从零开始的第一次尝试错误：不可读，难以维护。您的IDE（如果您使用IDE）无法检测HTML错误。看看，或者像@ScottMorrison这样的模板引擎，我相信你有。但是，你需要在你的问题中表明这一点。我们不是坐在你旁边看你的显示器。你必须告诉我们你的代码有什么问题。现在，您的代码应该至少抛出一个语法错误（除非您的问题中有拼写错误），而且您甚至没有给我们提供该语法错误。实际上，我发现了两个语法错误，还有一个：而不是at；。我已经解决了这个问题，但当我点击“回顾”按钮时，什么也没发生。我修复了选择器周围的报价问题，我已经注释掉了函数中的所有内容，并将其放入一个警报框中，以查看我是否可以得到它，并且什么也没有发生。我在第一次回答时就这样做了。我已经说明了问题的一部分在于我的按钮，它需要是“回顾”，而不是“回音”；谢谢，我会尝试一下。我发现我有很多错误，与我使用的按钮标签类型有关，而且我尝试选择的元素中没有“id”。我已经上传了我的更新代码。只要.val（）函数能够从输入标记中提取数据，它就可以工作。我现在开始阅读更多关于AJAX的内容，并希望在中午后开始写这篇文章。 
$(newHTML).appendTo(document);