通过AJAX编辑/更新php中的数据

时间：2017-09-29 10:03:37

标签： javascript php jquery html ajax

在我的index.php我从数据库中获取数据。我在其上放了一个编辑按钮，我使用了数据表来查看此表单中的数据信息。我有四个字段：Name，Age，Email，Update到mysqli_fetch_array我已经提取了数据。

enter image description here

这是index.php文件：

<?php
//including the database connection file
include_once("config.php");

//fetching data in descending order (lastest entry first)
//$result = mysql_query("SELECT * FROM users ORDER BY id DESC"); // mysql_query is deprecated
// using mysqli_query instead
?>

<html>
    <head>  
        <title>Homepage</title>
        <link rel="stylesheet" href="DataTables/datatables.css" type="text/css">
        <link rel="stylesheet" href="DataTables/DataTables/css/dataTables.bootstrap.css" type="text/css">
        <link rel="stylesheet" href="DataTables/DataTables/css/jquery.dataTables.css" type="text/css">
        <script src="DataTables/datatables.js"></script>
        <script src="style/jquery-3.2.1.js"></script>
        <script src="style/datatable.js"></script>
        <script src="DataTables/DataTables/js/dataTables.bootstrap.js"></script>
        <script src="DataTables/DataTables/js/jquery.dataTables.js"></script>
    </head>

    <body>
        <a href="add.html">Add New Data</a><br/><br/>

        <table id="datatable" class="display" width='100%' border=0>
            <thead>
                <tr bgcolor='#CCCCCC'>
                    <td>Name</td>
                    <td>Age</td>
                    <td>Email</td>
                    <td>Update</td>
                </tr>
            </thead>
            <?php
//while($res = mysql_fetch_array($result)) { // mysql_fetch_array is deprecated, we need to use mysqli_fetch_array 
//$action=$_POST["action"];
//if($action=='showroom')
            {
                $result = mysqli_query($mysqli, "SELECT * FROM users ORDER BY id DESC");
                while ($res = mysqli_fetch_array($result)) {
                    echo "<tr>";
                    echo "<td>" . $res['name'] . "</td>";
                    echo "<td>" . $res['age'] . "</td>";
                    echo "<td>" . $res['email'] . "</td>";
                    echo "<td><a href=\"edit.php?id=$res[id]\">Edit</a> | <a href=\"delete.php?id=$res[id]\" onClick=\"return confirm('Are you sure you want to delete?')\">Delete</a></td>";
                }
            }
            ?>
        </table>
    </body>
</html>

这是我的edit.php文件。首先，我检查空字段，之后我运行更新重定向到显示页面的表查询。在我们的示例中，它是index.php然后从网址获取ID，选择与此特定ID相关联的数据，通过mysqli_fetch_array获取数据。

<?php
// including the database connection file
include_once("config.php");

$id = $_POST['id'];
$name = $_POST['name'];
$age = $_POST['age'];
$email = $_POST['email'];

// checking empty fields
if (empty($name) || empty($age) || empty($email)) {

    if (empty($name)) {
        echo "<font color='red'>Name field is empty.</font><br/>";
    }

    if (empty($age)) {
        echo "<font color='red'>Age field is empty.</font><br/>";
    }

    if (empty($email)) {
        echo "<font color='red'>Email field is empty.</font><br/>";
    }
} else {
    //updating the table
    $result = mysqli_query($mysqli, "UPDATE users SET name='$name',age='$age',email='$email' WHERE id=$id");

    //redirectig to the display page. In our case, it is index.php
    header("Location: index.php");
}


//getting id from url
$id = $_GET['id'];

//selecting data associated with this particular id
$result = mysqli_query($mysqli, "SELECT * FROM users WHERE id=$id");

while ($res = mysqli_fetch_array($result)) {
    $name = $res['name'];
    $age = $res['age'];
    $email = $res['email'];
}
?>
<html>
    <head>
        <title>Edit Data</title>
        <script src="style/jquery-3.2.1.js"></script>
        <script src="style/insert.js"></script>
        <script src="style/view.js"></script>
        <script src="style/edit.js"></script>
    </head>
    <body>
        <a href="index.php">Home</a>
        <br/><br/>

        <p id="message"></p>
        <form name="form1" method="POST" action="edit.php">
            <table border="0">
                <tr> 
                    <td>Name</td>
                    <td><input type="text" name="name" value="<?php echo $name; ?>"></td>
                </tr>
                <tr> 
                    <td>Age</td>
                    <td><input type="text" name="age" value="<?php echo $age; ?>"></td>
                </tr>
                <tr> 
                    <td>Email</td>
                    <td><input type="text" name="email" value="<?php echo $email; ?>"></td>
                </tr>
                <tr>
                    <td><input type="hidden" name="id" value=<?php echo $_GET['id']; ?>></td>
                    <td><input type="submit" name="update" id="update" value="Update"></td>
                </tr>
            </table>
        </form>
    </body>
</html>

最后，这是我的edit.js文件。在这个文件中，我尝试通过AJAX编辑表单，但我无法找到我在哪里犯错误。

<script>
    $(document).ready(function (e) {
        $('#update').click(function (event)
        {
            event.preventDefault();

            $.ajax({
                data: $('form').serialize(),
                url: "edit.php", //php page URL where we post this data to save in database
                type: 'POST',
                success: function (strMessage) {
                    $('#message').text("strMessage");
                }
            })
        });
    });
</script>

1 个答案:

答案 0 :(得分：1)

您正在对同一文件进行编辑和更新，因此您必须在文件中添加条件。更改您的代码如下：

<强> edit.php 

<?php 
// including the database connection file
include_once("config.php");
if($_SERVER['REQUEST_METHOD'] == "POST")
{

    $id = $_POST['id'];
    $name = $_POST['name'];
    $age = $_POST['age'];
    $email = $_POST['email'];   

    // checking empty fields
    if(empty($name) || empty($age) || empty($email)) {  

        if(empty($name)) {
            echo "<font color='red'>Name field is empty.</font><br/>";
        }

        if(empty($age)) {
            echo "<font color='red'>Age field is empty.</font><br/>";
        }

        if(empty($email)) {
            echo "<font color='red'>Email field is empty.</font><br/>";
        }       
    } else {    
        //updating the table
        $result = mysqli_query($mysqli, "UPDATE users SET name='$name',age='$age',email='$email' WHERE id=$id");

        //redirectig to the display page. In our case, it is index.php
        header("Location: index.php");
    }

}
//getting id from url
$id = $_GET['id'];

//selecting data associated with this particular id
$result = mysqli_query($mysqli, "SELECT * FROM users WHERE id=$id");

while($res = mysqli_fetch_array($result))
{
    $name = $res['name'];
    $age = $res['age'];
    $email = $res['email'];
}
?>
<html>
<head>
    <title>Edit Data</title>
    <script src="style/jquery-3.2.1.js"></script>
    <script src="style/insert.js"></script>
    <script src="style/view.js"></script>
    <script src="style/edit.js"></script>


</head>

<body>
    <a href="index.php">Home</a>
    <br/><br/>

    <p id="message"></p>
    <form name="form1" method="POST" action="edit.php">
        <table border="0">
            <tr> 
                <td>Name</td>
                <td><input type="text" name="name" value="<?php echo $name;?>"></td>
            </tr>
            <tr> 
                <td>Age</td>
                <td><input type="text" name="age" value="<?php echo $age;?>"></td>
            </tr>
            <tr> 
                <td>Email</td>
                <td><input type="text" name="email" value="<?php echo $email;?>"></td>
            </tr>
            <tr>
                <td><input type="hidden" name="id" value=<?php echo $_GET['id'];?>></td>
                <td><input type="submit" name="update" id="update" value="Update"></td>
            </tr>
        </table>
    </form>
</body>
</html>
相关问题
最新问题