使用 Jquery/PHP/Mysql 更新编辑值答案

【问题标题】：Updating Edited Value Using Jquery/PHP/Mysql使用 Jquery/PHP/Mysql 更新编辑值
【发布时间】：2015-12-07 18:11:14
【问题描述】：

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

我有三个按钮edit/save/cancel

当我点击编辑按钮跨度数据推送到输入文本和编辑按钮替换为保存按钮！！

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

代码

      <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';
                }
            }
    ?>

【问题讨论】：

你知道php中的mysql扩展被弃用了吗？
如果要更新db中的值，请尝试使用ajax
那么，您自己尝试过什么？到目前为止，我所看到的只是其他所有内容的代码。但是与您希望实现的目标无关？请记住，Stack Overflow 不是来为您工作的。如果您对自己的尝试有任何疑问，我们会在这里。
@raveenanigam 谢谢！！我使用 Ajax 我重新编辑了我的代码
@icecub 我已经重新编辑了我的代码，当我点击编辑按钮时，我会在我的文本框中使用保存和取消按钮获取跨度数据，但是当我尝试使用保存按钮更新时它不会更新在我的数据库和 UI 中，任何帮助都非常感谢谢谢

标签： javascript php jquery mysql ajax

【解决方案1】：

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

$('#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();
    }
}

?>

【讨论】：

【解决方案2】：

我通常会有两个脚本 (.php) 文件。

一个用于显示表单，一个用于捕获提交（可能通过 ajax）

您可以将两者放在同一个 .php 文件中，但您需要在输出任何文本之前检查您是否有任何 POST 数据要处理。

如果你有两个文件

查看文件：

<html>
<body>
<form method="POST" action="path/to/formname_submit.php">
  your form fields go here
  <input name="somefield"/>
  ...
</form>
<script>
 //your jquery code
 .... 

</script>
<body>
</html>

提交文件

<?php
  if (empty($_POST['id'])){
     die("no ID");
  };
  if (empty($_POST['editvalue'])){
     die("no editvalue");
  }

  //get a database connection
  $db = mysqli(DBHOST,DBUSER,DBPASS,DBNAME);
  $db->set_charset("utf8");
  // read in the POST data
  //should do some more validation / anti SQL injection
    $editvalue = $db->escape_string($_POST['editvalue']);
    $id = intval($_POST['id']); 

  $sql = "UPDATE sometable SET `field` = '$editvalue' WHERE id=$id";

  if ($db->query($sql)){
      echo 'Success';
  }
  else {
     echo 'UPDATE ERROR:'.$db->errno.': '.$db->error;
  }

您的 jquery 现在可以将数据发送到第二个脚本，并查看从调用返回的数据是否为“成功”，如果不是则显示错误。

【讨论】：