最受欢迎

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

Updating Edited Value Using Jquery/PHP/Mysql

本文关键字：PHP Mysql Jquery 编辑 更新 | 更新日期: 2023-09-27

有人可以帮助我更新编辑值在mysql数据库使用jquery/php。

我有三个按钮edit/save/cancel

当我点击编辑按钮span数据推入输入文本和编辑按钮替换为保存按钮!!

当我点击编辑按钮，我会得到span数据在我的文本框保存和取消按钮，但当我尝试使用保存按钮更新，它不更新在我的数据库和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';
                }
            }
    ?>

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

  • $('#id').val(text.id);
    • 需要带有参数id="id"的HTML元素
  • $('#url1').val(text.url);需要id="url1"参数的HTML元素
  • JS函数feeds.php中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文件:PHP .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();
    }
}
?>

我通常有两个脚本(.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现在可以将数据发送到第二个脚本，并查看从调用返回的数据是否为'Success'，如果不是则显示错误。

相关文章：
最新更新
www.56WenDa.com 2012-2023 | php问答网 | php学习