How to implement click-to-modify editing function in php

With the continuous development of web development technology, more and more web applications need to provide front-end users with the ability to directly edit data. In order to achieve this goal, developers need to learn how to use PHP to send relevant requests to the server to update, insert, or delete data. The method that this article will introduce is to modify the data directly in the browser by clicking the edit button, without having to jump or refresh to update the page.

Directory

• Preparation work for modifying data
• Realizing click editing
• Processing of modifying data
• Complete code

Preparation for modifying data

Before starting, you need to determine the location of the data that needs to be edited on the server. For example, if you need to edit a record in a table named users, you can use the following code to connect to the database and query the data:

// 连接数据库
$pdo = new PDO('mysql:host=localhost;dbname=test', 'username', 'password');

// 查询指定 ID 的用户数据
$id = $_GET['id'];
$stmt = $pdo->prepare('SELECT * FROM users WHERE id = ?');
$stmt->execute([$id]);
$user = $stmt->fetch();

After obtaining the data, you need to add it to the page Rendered for user editing. What needs to be noted here is that we need to add an input element for each field that needs to be edited, and its value should be the value of the current field. At the same time, add a "Confirm" button after each input element to allow users to submit changes.

  ">   用户名：   ">   确认

Implement click editing

In order for users to click the edit button, we need to add a "modify" link and open the edit form when clicked. JavaScript is used here to implement this functionality.

First, we need to add a click event listener for the "modify" link and call the showEditor function when the user clicks:

<a>修改</a>

Next, we need to define the showEditor function and create it in it Form elements for users to edit data:

function showEditor() {
  var form = document.createElement('form');
  form.method = 'post';
  form.action = 'update.php';
  form.innerHTML = `
    <input>">
    <label>用户名：</label>
    <input>">
    <button>确认</button>
  `;
  document.body.appendChild(form);
}

What needs to be noted here is that after we create the form elements, we also need to add them to the page (here to the body element) to ensure that Users can see and edit the content.

Processing of modified data

After the user clicks the "Confirm" button, the form data will be submitted to the server's update.php file for data update operations. Here we need to get the form data first and use PDO to execute an update statement:

// 连接数据库
$pdo = new PDO('mysql:host=localhost;dbname=test', 'username', 'password');

// 获取表单数据
$id = $_POST['id'];
$username = $_POST['username'];

// 更新用户数据
$stmt = $pdo->prepare('UPDATE users SET username = ? WHERE id = ?');
$stmt->execute([$username, $id]);

After completing the data update, we can redirect the user to other pages as needed, or display a "Modification Successful" in the current page tips.

echo '修改成功！';

Full code

The sample code is as follows:

prepare('SELECT * FROM users WHERE id = ?');
$stmt->execute([$id]);
$user = $stmt->fetch();
?>
<a>修改</a>

<script>
// showEditor 函数
function showEditor() {
  var form = document.createElement(&#39;form&#39;);
  form.method = &#39;post&#39;;
  form.action = &#39;update.php&#39;;
  form.innerHTML = `
    <input type="hidden" name="id" value="<?php echo $user[&#39;id&#39;]; ?>">
    <label>用户名：
    <input type="text" name="username" value="<?php echo $user[&#39;username&#39;]; ?>">
    <button type="submit">确认
  `;
  document.body.appendChild(form);
}
</script>

<!-- update.php -->
<?php // 连接数据库
$pdo = new PDO(&#39;mysql:host=localhost;dbname=test&#39;, &#39;username&#39;, &#39;password&#39;);

// 获取表单数据
$id = $_POST[&#39;id&#39;];
$username = $_POST[&#39;username&#39;];

// 更新用户数据
$stmt = $pdo->prepare('UPDATE users SET username = ? WHERE id = ?');
$stmt->execute([$username, $id]);

// 显示成功消息
echo '修改成功！';
?>

In this article, we learned how to modify data directly in the browser by clicking the edit button. It should be noted that in order to ensure data security, we need to add some necessary verification logic to the code to avoid unnecessary security risks. Finally, I hope this article can be helpful to PHP web developers.

The above is the detailed content of How to implement click-to-modify editing function in php. For more information, please follow other related articles on the PHP Chinese website!