【问题标题】:Showing a sql table when radio button is selected using AJAX使用 AJAX 选择单选按钮时显示 sql 表
【发布时间】:2018-06-19 02:41:09
【问题描述】:

我有一个包含三个单选按钮和一个空表的网页。我的目标是选择一个单选按钮,并让表格根据单击的单选按钮显示员工列表。现在,当我按下按钮时,列表不会显示。我不知道我做错了什么。我尝试向 doAjax 函数添加警报并且警报出现了,所以我知道它正在访问该函数。下面是我的代码,我有三个文件。任何帮助表示赞赏。

//assign3.php
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
          <script src = "http://code.jquery.com/jquery-3.2.1.min.js">
  </script>
    <script src ="js/assign3js.js" type = "text/javascript" ></script>

</head>
<body>

    <table border ='1'style = 'margin:auto' id = "employees" >
        <tr><td colspan ='3'><h1>Employees </h1></td></tr>
        <th> First Name</th>
        <th>Last Name</th>
        <th>Employee ID</th>
    </table>
        <input type="radio" name="employeeType" value="server" id="server"> Server<br>
        <input type="radio" name="employeeType" value="bartender"id="bartender"> Bartender<br>
        <input type="radio" name="employeeType" value="host"id = "hosts"> Host<br>

</body>

//script.js

$("document").ready(
function()
{
$("#server").click(doAjax);
$("#hosts").click(doAjax1);
$("#bartender").click(doAjax2);  
}
);

function doAjax()
{
$.ajax({"method":"POST","url":"servers.php"}).done(update);
}
function update(data)
{
result = JSON.parse(data);
for(index =0; index < result.length; index++)
{
    var row = "<tr>";
    row += "<td>" + result[index].firstName + "</td>";
    row += "<td>" + result[index].lastName + "</td>";
    row += "<td>" + result[index].employeeID + "</td>";
    row += "</tr>";
    $("#employees").append(row);       
 }
}

//server.php

    <?php

 $server = (object) null;
 $connection = "mysql:host=localhost;dbname=restaurant";
 $user = "root";
 $pwd = "mysql";
 $db = new PDO($connection, $user, $pwd);
 $results = $db->query("SELECT firstName, lastName, employeeID  FROM 
 employee JOIN `server` ON employee.employeeID = server.employeeID");
 while ($row = $results->fetch()) 
 {   
 $server->firstName= $row["firstName"]; 
 $server-> lastName=$row["lastName"] ;
 $server->employeeId = $row["employeeID"];  
 }
 $employee = [];
 array_push($employee,$server);

$json1 = json_encode($employee);
echo $json1;
?>

【问题讨论】:

  • Q1:是assign3js.js = script.js吗? Q2:哪个名字的页面有html代码?它也是“server.php”吗? Q3:为什么是“?”在表单的操作中?
  • Q2:assign3.php 有 html。 Q3:我不知道为什么?我的老师就是这样教的。但是我现在没有对那个特定的代码块做任何事情,所以我把它从问题中删除了。
  • 将此代码作为前两行放在 server.php 中,以便能够看到最终的 php 错误:error_reporting(E_ALL);followed by ini_set('display_errors', 1);
  • 显示任何 php 错误?
  • 我在添加该代码时没有看到任何 php 错误显示。

标签: php sql ajax


【解决方案1】:

您的 SQL 查询错误,您已经这样做了

SELECT firstName, lastName, employeeID FROM employee JOIN `server` ON 
employee.employeeID = server.employeeID

但employeeID 存在于员工和服务器中,因此您需要修改查询以具体从哪个表中获取employeeID,因此它应该看起来像

SELECT employee.firstName, employee.lastName, employee.employeeID FROM employee JOIN `server` ON 
employee.employeeID = server.employeeID

我制作了一个 SQLFiddle here,它显示了这一点。您应该检查 $results 是否等于 false,因为如果查询失败,查询函数将返回 false。 这对我有用,我也必须更改 server.php 中的第 14 行,否则它不会显示员工 ID,这是因为在 ajax 脚本中您将其引用为employeeID,但您在第 14 行将其设置为employeeId 所以现在应该是

$server->employeeID = $row["employeeID"];

现在,当您运行所有这些时,只会返回一个员工,如果您希望它返回多个,您需要在 server.php 中有一个将员工推送到的数组,因为现在它会覆盖前一个员工并且只返回最后一个是因为他们用相同的键写入同一个对象。 为了让多名员工返回,我将代码更改为

...
$server = [];
...
$count = 0;
while ($row = $results->fetch()) {
    //create new class to stop warnings of creating object from empty value
    $server[$count] = new \stdClass();
    $server[$count]->firstName= $row["firstName"];
    $server[$count]->lastName=$row["lastName"] ;
    $server[$count]->employeeID = $row["employeeID"];
    $count++;
}
...

它的作用是 $server 现在是一个数组,每次我们在 while 循环中遍历一个员工时,我们都会将我们的值分配给存储在 $server 数组中的一个新对象。 script.js 看起来像这样

function update(data) {
    var result = JSON.parse(data)[0]; // [0] because the json was wrapped in 
    // double []'s
    for(var index =0; index < result.length; index++) {
        var row = "<tr>";
        row += "<td>" + result[index].firstName + "</td>";
        row += "<td>" + result[index].lastName + "</td>";
        row += "<td>" + result[index].employeeID + "</td>";
        row += "</tr>";
        $("#employees").append(row);
    }
}

不确定这是否是问题的最佳解决方案,但我让它工作起来没有太多麻烦。

【讨论】:

  • 我对它进行了测试,它工作的唯一方法是在那里有 [0],至少对我来说。 JSON 是 [[{some data}]] 并且没有 [0] 它将无法工作。我对 JSON 不太熟悉,但我的理解是我需要那里的 [0] 来选择第一个对象,因为我选择的数组在数组中
  • 那你是对的!对我来说是[{...}, {...}, {...}],但我正在测试另一个代码变体。
  • 你能添加类似console.log(data);的东西吗?在更新功能的开始并告诉我们当您单击 ajax 按钮时它在控制台中说什么?它应该打印出 ajax 请求返回的数据。
  • 那么你必须在js中的update()函数中使用jquery的.each()函数,而不是原版javascript的for语句。
  • 亚历克斯,干得好! ;-) 我喜欢你的回答和详细的 cmets。祝你好运。
【解决方案2】:

我的回答只是对@alex 回答的补充。亚历克斯很好地指出了主要问题/方面!

我建议您使用另一种方法:无论您选择哪个单选按钮,都只使用一个 js 函数来获取员工数据。当您单击一个单选按钮时,发送一个带有相应单选按钮的值作为参数的 ajax 请求。该值将在服务器端读取,并依赖于它,将构建并执行相应的 sql 语句。响应将被读取并附加到员工表中。

关于你的代码版本和我的提议,这里有太多话要说。我希望你能理解我的所作所为。

要点:

  • 我将“server.php”重命名为“get-employee.php”(原因很明显)。
  • 我实现了使用prepared statements 而不是query,这样您就可以安全地进行sql注入,以防您需要在查询中使用输入参数。
  • 使用fetchAll() 方法从db 中获取员工数据并保存在一个数组中。无需获取和循环访问对象。
  • 数据库连接详细信息在常量中定义。
  • 现在添加了一个数组,其中包含有关异常处理和其他方面的数据库连接选项(需要)。
  • tbody 容器添加到表中,员工数据将附加到该表中。通常,如果您使用th,则在thead 容器中使用它。如果你使用thead,那么也使用tbody

我认为这是最重要的。有什么问题随时问我……明天。

祝你好运。

assign3js.js

$(document).ready(function () {
    $('input[name="employeeType"]').click(function () {
        var employeeType = $(this).val();
        updateEmployees(employeeType);
    });
});

function updateEmployees(type) {
    $.ajax({
        method: 'post',
        dataType: 'json',
        url: 'get-employee.php',
        data: {
            'type': type
        }
    })
    .done(function (response, textStatus, jqXHR) {
        if (response) {
            for (var i = 0; i < response.length; i++) {
                var row = '<tr>';
                row += '<td>' + response[i].firstName + '</td>';
                row += '<td>' + response[i].lastName + '</td>';
                row += '<td>' + response[i].employeeID + '</td>';
                row += '</tr>';
                $('#employees tbody').append(row);
            }
        } else {
            $('#employees tbody').append('<tr><td colspan="3">No employees found</td></tr>');
        }

    })
    .fail(function (jqXHR, textStatus, errorThrown) {
        // alert(textStatus + '\n' + errorThrown + '\n\n' + jqXHR.responseText);
    })
    .always(function (response, textStatus, jqXHR) {
        //...
    });
}

assign3.php:

<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
        <meta charset="UTF-8" />
        <!-- The above 3 meta tags must come first in the head -->

        <title>Demo</title>

        <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="js/assign3js.js" type="text/javascript"></script>

        <style type="text/css">
            #employees {
                /*margin: auto;*/
                border: 1px solid #ccc;
            }

            #employee-types {
                margin-top: 20px;
                border: 1px solid #ccc;
            }
        </style>
    </head>
    <body>

        <table id="employees">
            <thead>
                <tr>
                    <th colspan="3">
                        <h1>Employees</h1>
                    </th>
                </tr>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Employee ID</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>

        <fieldset id="employee-types">
            <legend>Employee type</legend>
            <input type="radio" id="server" name="employeeType" value="server">
            <label for="server">Server</label><br/>

            <input type="radio" id="bartender" name="employeeType" value="bartender">
            <label for="bartender">Bartender</label><br/>

            <input type="radio" id="hosts" name="employeeType" value="host">
            <label for="hosts">Host</label><br/>
        </fieldset>

    </body>
</html>

get-employee.php

<?php

// Db configs.
define('HOST', 'localhost');
define('PORT', 3306);
define('DATABASE', 'restaurant');
define('USERNAME', 'root');
define('PASSWORD', 'mysql');
define('CHARSET', 'utf8');

// Error reporting.
error_reporting(E_ALL);
ini_set('display_errors', 1); // SET IT TO 0 ON A LIVE SERVER!
//
// Create a PDO instance as db connection to db.
$connection = new PDO(
        sprintf('mysql:host=%s;port=%s;dbname=%s;charset=%s', HOST, PORT, DATABASE, CHARSET)
        , USERNAME
        , PASSWORD
        , [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_EMULATE_PREPARES => FALSE,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
        ]
);

$response = false;

if (isset($_POST['type'])) {
    $employeeType = $_POST['type'];

    /*
     * The bindings array, mapping the named markers from the sql statement 
     * (if any) to the corresponding values. It will be directly passed as 
     * argument to the PDOStatement::execute method.
     * 
     * @link http://php.net/manual/en/pdostatement.execute.php
     */
    $bindings = [];

    // Set the sql statement based on the submitted employee type.
    switch ($employeeType) {
        case 'bartender':
            // $sql = '...';
            // $bindings[:markerName] = markerValue;
            break;
        case 'hosts':
            // $sql = '...';
            // $bindings[:markerName] = markerValue;
            break;
        case 'server':
        default:
            $sql = 'SELECT 
                        emp.firstName,
                        emp.lastName,
                        emp.employeeID 
                    FROM employee AS emp
                    JOIN `server` AS srv ON srv.employeeID = emp.employeeID';
            break;
    }

    // Prepare the sql statement for execution and return a statement object.
    $statement = $connection->prepare($sql);

    // Execute the prepared statement.
    $statement->execute($bindings);

    // Fetch data - all at once - and save it into response array.
    $response = $statement->fetchAll(PDO::FETCH_ASSOC);

    //-----------------------------------------------------------------------
    // ...or fetch data one record at a time and save it into response array.
    //-----------------------------------------------------------------------
    // $employee = [];
    // while ($row = $statement->fetch(PDO::FETCH_ASSOC)) {
    //     $employee[] = $row;
    // }
    // $response = $employee;
    //-----------------------------------------------------------------------
}

echo json_encode($response);

【讨论】:

    猜你喜欢
    • 2014-02-06
    • 2021-02-16
    • 1970-01-01
    • 1970-01-01
    • 2012-12-28
    • 2015-07-28
    • 2019-09-21
    • 2015-04-26
    • 1970-01-01
    相关资源
    最近更新 更多