从表单保存和加载数据而不提交

Saving and loading data from a form without submitting

本文关键字：提交 数据 加载 表单 保存      更新时间：2023-09-26

我的任务是为一个相当大的表单编写一个加载/保存函数。 这样，用户可以保存他们的工作，然后稍后返回并加载它并继续工作。

我决定使用服务器端存储并将数据本地保存到 mysql 数据库。 我想出了"saveForm"，它只是将 _POST 美元作为长字符串存储到列中。

我不知道如何编写"加载表单"。

我有： 

<form id="qa" .. "> 
    <button id="saveForm" type="submit"..."> 
    <button id="loadForm" type="submit"..."> 
    <input type="hidden" id="unique_user_id"..."> 
</form>
<javascript> 
$('#saveForm').bind({
    click: function() {
        $.ajax({ 
            type: 'post',
            url: "/saveForm.php",
            data: $("#qa").serialize(),
            success: function() {
                alert("form was submitted");
            },
        });
        return false;
    },
}); 
<javascript>

saveForm.php:  (PHP & PDO) 
// connect
insert into `saveQAForm` ($_POST['id'],var_export($_POST));

做这样的事情：

$(document).ready(function() {
    $('#loadForm').bind({
       click: function() {
          $.ajax({ 
             type: 'post',
             url: "/loadForm.php",
             data: 'id=123&token=8ash198hkuhd98yhk',
             success: function(data) {
                $('#first_name').val = data.first_name;
                $('#last_name').val = data.last_name;   
             }
          });
          return false;
       },
    }); 
});

加载表单.php

// Get values
$id = $_POST['id'];
$token = $_POST['token'];
// Check hash value here. Use your preferred
// database method ensuring POST values are filtered first. Then:
if($token == $row['token'])
{
   // Make DB query to get form data and return it as JSON
   return json_encode($row);
}

我觉得在检索表单时传递用户/会话唯一的唯一令牌或随机数很重要，这样其他人就无法请求 ID 并获取该用户的个人信息。只是一个想法。

当页面加载（$（document）.ready（））时，将执行loadForm函数：将AJAX请求发送到服务器，它使用数据进行响应以填写表单。在这种情况下，服务器必须查询数据库并返回请求的数据。您可以在不提交任何内容的情况下执行此操作。

下面是一个示例：

客户端： 

$(document).ready (loadForm);
function loadForm () {
  $.ajax ({
    url: '/loadForm.php' ,
    success: function (data) {
      $('#firstField').val (data.firstField);
      $('#secondField').val (data.secondField);
    }
  });

服务端：查询数据库并回显数据

您可以在执行 php 代码期间加载保存的数据（如果有），并在表单中填写这些数据字段。这里的Ajax可能不是必需的。

<?php //yourform.php (PHP & PDO) 
// connect
select * from `saveQAForm` where user_id = $_COOKIE['user_id']
?><input name="field1" value="<?=(isset($data['field1'])?$data['field1']:""?>" />
相关文章：