javascript - 使用 Jquery/PHP/Mysql 更新编辑值

标签 javascript php jquery mysql ajax

有人可以帮我使用 jquery/php 更新 mysql 数据库中的编辑值吗？

我有三个按钮编辑/保存/取消

当我单击“编辑”按钮时，将数据推送到输入文本中，并将“编辑”按钮替换为“保存”按钮!!

当我单击编辑按钮时，我将在文本框中使用保存和取消按钮获取跨度数据，但是当我尝试使用保存按钮进行更新时，它不会在我的数据库和用户界面中更新

代码

      <html>
        <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script type="text/javascript"> 
function showdata()
{
    $.ajax({
        url:"pages/feeds.php",
        type:'post',
        async:false,
        data:{
            showtable:1
        },
        success:function(re){
            $('#showdata').html(re);
        }
    });
}


$('#orders').delegate('.editOrder','click',function(e){
            e.preventDefault(e); 
            var $li = $(this).closest('li');    $li.find('input.name').val($li.find('span.name').html());
            $li.addClass('edit');
        });
        $('#orders').delegate('.cancelEdit','click',function(e){
            e.preventDefault(e); 
            $(this).closest('li').removeClass('edit');
        });


        //Edit Code
        $('body').delegate('.edit','click',function(){
                var IdEdit = $(this).attr('ide');
                $.ajax({
                    url:"pages/feeds.php",
                    type:"post",
                    data:{
                        editvalue:1,
                        id:IdEdit
                    },
                    success:function(show)
                    {
                        $('#id').val(show.id);
                        $('#url1').val(show.url);
                    }
                });
        });
        //Ends

        //Update Starts
        $('.update').click(function(){
            var id = $('#id').val()-0;
            var urls = $('#url1').val();
                $.ajax({
                url:"pages/feeds.php",
                type:"post",
                async:false,
                data:{
                    update:1,
                    id:id,
                    upurls:urls
                },
                success:function(up)
                {
                    $('input[type=text]').val('');
                    showdata();
                },
                error:function(){
                    alert('error in updating');
                }

            });
        });
        //UPdate Ends

        </script>
        <style type="text/css">
            ul li .edit{
                display:none;
            }

            ul li.edit .edit{
                display:initial;
            }

            ul li.edit .noedit{
                display:none;
            }
        </style>
        </head>
        <body>
        <ul id="orders">
            <?php 
                $sql = "select * from demo";
                $result = mysql_query($sql);
                while($row = mysql_fetch_object($result))
                {
            ?>
                <li>
                    <span class="noedit name" value='<?php echo $row->id;?>'><?php echo $row->url;?></span>
                    <input id="url1" class="form-control edit name" value="<?php echo $row->id;?>"/>

                    <a ide='<?php echo $row->id;?>' id="edit" class='editOrder' href="#" style="display:block-inline;">EDIT</a>

                    <a idu='<?php echo $row->id;?>' id="update" class='update saveEdit' href='#' style='display:none;'>SAVE</a>

                    <a idd='<?php echo $row->id;?>'  id="delete" class='delete' href="#" style="display:block-inline;">DELETE</a>

                    <a idc='<?php echo $row->id;?>' id="cancel" class='cancelEdit edit' href='#' style='display:none;'>CANCEL</a>
                </li>
            <?php } ?>
            </ul>
        </body>
    </html>



    <?php 

    //Edit Starts
            if(isset($_POST['editvalue']))
            {
                $sql = "select * from deccan where id='{$_POST['id']}'";
                $row = mysql_query($sql);
                $rows = mysql_fetch_object($row);

                header("Content-type:text/x-json");
                echo json_encode($rows);
                exit();
            }
        //Ends

        //UPdate Starts
            if(isset($_POST['update']))
            {
                $sql = "
                    update deccan 
                    set 
                        url='{$_POST['upurls']}'
                    where id='{$_POST['id']}'
                ";
                $result = mysql_query($sql);
                if($result)
                {
                    //alert('success');
                    echo 'updated successfully';
                }
                else
                {
                    //alert('failed');
                    echo 'failed to update';
                }
            }
    ?>

最佳答案

好吧。我仍然缺少您提供的以下代码，因此您必须自己添加这些代码:

  • $('#id').val(text.id); 所需的带有参数 id="id" 的 HTML 元素
  • $('#url1').val(text.url); 所需的带有参数 id="url1" 的 HTML 元素
  • feeds.php 中 JS 函数 showdata(); 的 PHP 响应代码

由于我这里没有您的数据库，因此我无法测试代码。它应该可以正常工作，但如果有任何问题，请告诉我:

PHP 文件:index.php

<?php
// Include PDO class
include_once("pdo.class.php");

// Database connection settings
define("DB_HOST", "localhost");
define("DB_USER", "username");
define("DB_PASS", "password");
define("DB_NAME", "database");

?>

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta charset="UTF-8">

        <!-- CSS resources -->
        <link rel="stylesheet" type="text/css" href="style.css">

        <!-- Javascript resources -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="main.js"></script>

        <title>Update Script</title>
    </head>
    <body>
        <ul id="orders">
            <?php

            // Instantiate database
            $db = new Database;

            // Try getting data from database
            Try {
                // Query
                $db->query("SELECT * FROM demo");

                // Get results
                $data = $db->resultset();

                // Echo reults
                foreach($data as $row){ ?>

                    <li>
                        <span class="noedit name" value="<?php echo $row['id']; ?>"><?php echo $row['url']; ?></span>
                        <input id="url1" class="form-control edit name" value="<?php echo $row['id']; ?>" />

                        <a data-ide="<?php echo $row['id']; ?>" class='editOrder' href="#" style="display:block-inline;">EDIT</a>
                        <a data-idu="<?php echo $row['id']; ?>" class='update saveEdit' href='#' style='display:none;'>SAVE</a>
                        <a data-idd="<?php echo $row['id']; ?>" class='delete' href="#" style="display:block-inline;">DELETE</a>
                        <a data-idc="<?php echo $row['id']; ?>" class='cancelEdit edit' href='#' style='display:none;'>CANCEL</a>
                    </li>

                <?php }

            //Catch any database errors
            } Catch(PDOException $e){
                echo "Database error:". $e->getMessage();
            }

            ?>
        </ul>
    </body>
</html>

Javascript文件:main.js

$('#orders').delegate('.editOrder','click',function(e){
    e.preventDefault();

    var $li = $(this).closest('li');

    $li.find('input.name').val($li.find('span.name').html());
    $li.addClass('edit');
});

$('#orders').delegate('.cancelEdit','click',function(e){
    e.preventDefault(); 
    $(this).closest('li').removeClass('edit');
});

//Edit Code
$('body').delegate('.edit','click',function(){
    var IdEdit = $(this).attr('data-ide');

    $.ajax({
        url: "pages/feeds.php",
        type: "POST",
        data: 'editvalue=1&id='+IdEdit,
        success: function(text){
            $('#id').val(text.id);
            $('#url1').val(text.url);
        }
    });
});

//Update Code
$('.update').click(function(){
    var id = $('#id').val()-0;
    var urls = $('#url1').val();

    $.ajax({
        url: "pages/feeds.php",
        type: "POST",
        async: false,
        data: 'update=1&id='+id+'&upurls='+urls,
        success: function(text){
            $('input[type=text]').val('');
            showdata();
        },
        error:function(){
            alert('Error in updating');
        }
    });
});

function showdata(){
    $.ajax({
        url: "pages/feeds.php",
        type: "POST",
        async: false,
        data: 'showtable=1',
        success:function(text){
            $('#showdata').html(text);
        }
    });
}

CSS文件:style.css

ul li .edit{
    display:none;
}

ul li.edit .edit{
    display:initial;
}

ul li.edit .noedit{
    display:none;
}

PHP 文件:feeds.php

<?php
// Include PDO class
include_once("pdo.class.php");

// Database connection settings
define("DB_HOST", "localhost");
define("DB_USER", "username");
define("DB_PASS", "password");
define("DB_NAME", "database");

// Instantiate database
$db = new Database;

// Edit
if(isset($_POST['editvalue']) && $_POST['editvalue'] == 1){

    // Try getting data from database
    Try {
        // Query
        $db->query("SELECT * FROM deccan WHERE id = :id");

        // Prepare POST data (to prevent SQL injection)
        $db->bind(":id", $_POST['id']);

        // Get result
        $data = $db->single();

        // Set header JSON
        header("Content-type:text/x-json");

        // Return result
        echo json_encode($rows);
    } Catch(PDOException $e){
        echo "Database error:". $e->getMessage();
    }
} else if(isset($_POST['update']) && $_POST['update'] == 1){

    // Try updating data in database
    Try {
        // Query
        $db->query("UPDATE deccan SET url = :url WHERE id = :id");

        // Prepare POST data (to prevent SQL injection)
        $db->bind(":url", $_POST['upurls']);
        $db->bind(":id", $_POST['id']);

        // Execute Query
        $db->execute();

        // Return succes
        echo 'updated successfully';
    } Catch(PDOException $e){
        echo "Database error:". $e->getMessage();
    }
} else if(isset($_POST['showtable']) && $_POST['showtable'] == 1){

    /*
        This part was not included in your code, so write it
        yourself using above data as examples
    */
}

?>

PHP 文件:pdo.class.php

<?php

Class Database {
    private $host = DB_HOST;
    private $user = DB_USER;
    private $pass = DB_PASS;
    private $dbname = DB_NAME;

    private $dbh;
    private $error;

    private $stmt;

    public function __construct(){
        // Set DSN
        $dsn = 'mysql:host=' . $this->host . ';dbname=' . $this->dbname;
        // Set options
        $options = array(
            PDO::ATTR_PERSISTENT    => true,
            PDO::ATTR_ERRMODE       => PDO::ERRMODE_EXCEPTION
        );
        // Create a new PDO instanace
        try{
            $this->dbh = new PDO($dsn, $this->user, $this->pass, $options);
        }
        // Catch any errors
        catch(PDOException $e){
            $this->error = $e->getMessage();
            return $this->error;
        }
    }

    public function query($query){
        $this->stmt = $this->dbh->prepare($query);
    }

    public function bind($param, $value, $type = null){
        if (is_null($type)) {
            switch (true) {
                case is_int($value):
                    $type = PDO::PARAM_INT;
                    break;
                case is_bool($value):
                    $type = PDO::PARAM_BOOL;
                    break;
                case is_null($value):
                    $type = PDO::PARAM_NULL;
                    break;
                default:
                    $type = PDO::PARAM_STR;
            }
        }
        $this->stmt->bindValue($param, $value, $type);
    }

    public function execute(){
        return $this->stmt->execute();
    }

    public function column(){
        $this->execute();
        return $this->stmt->fetchAll(PDO::FETCH_COLUMN);
    }

    public function resultset(){
        $this->execute();
        return $this->stmt->fetchAll(PDO::FETCH_ASSOC);
    }

    public function single(){
        $this->execute();
        return $this->stmt->fetch(PDO::FETCH_ASSOC);
    }

    public function rowCount(){
        return $this->stmt->rowCount();
    }

    public function lastInsertId(){
        return $this->dbh->lastInsertId();
    }

    public function beginTransaction(){
        return $this->dbh->beginTransaction();
    }

    public function endTransaction(){
        return $this->dbh->commit();
    }

    public function cancelTransaction(){
        return $this->dbh->rollBack();
    }

    public function debugDumpParams(){
        return $this->stmt->debugDumpParams();
    }
}

?>

关于javascript - 使用 Jquery/PHP/Mysql 更新编辑值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32519111/

上一篇：c# - 使用 SQL 在两个表单之间传递数据

下一篇：php - Yii框架无法将数据插入特定表

相关文章：

javascript - 单页网站和后退按钮困惑

javascript - 在 three.js 中勾勒出一个 3d 对象

php - 我的 PDO 执行函数出错

javascript - react js : import component to route

Javascript - 如何获取所有元素并对每个元素做同样的事情

php - 使用谷歌通过反向地理编码获取街道、城市和国家

php - 如何使用 C 和 G-wan 网络服务器设置和读取 cookie

javascript - jQuery 克隆主包装内的元素

jQuery 将类添加到类中

javascript - bxSlider 无法正常工作

©2024 IT工具网  联系我们