时间戳

首页 > 解决方案 > 无需提交即可填写表单数据 (PHP/JS)

javascript - 无需提交即可填写表单数据 (PHP/JS)

问题描述

这是我在这里的第一篇文章，因此非常欢迎对这个问题提出任何批评。

问题：我的网页上有一个表单输入，其中包含基本用户数据（请输入您的姓名等）但由于网页有多个页面，用户可以在未完全完成和提交的页面之间导航形式。（例如，在卡片页面上返回商店）我想问是否可以保留用户在页面刷新时已经填写的内容，而无需用户实际按下提交按钮或最佳实践。

现在我正在尝试一个带有 JS onclick 事件的 Ajax 请求，以某种方式获取我的 php $SESSION 的相关信息。可悲的是，我在这方面失败了，所以如果这是要走的路，而且你知道一个很好的教程，我也会很高兴有一个链接。

感谢您的时间！

标签： javascriptphphtmluser-data

解决方案

一个非常简单的示例，fetch用于向（在这种情况下）同一页面发出 ajax 请求。请求是POST由 PHP 代码处理并设置单个会话变量的请求。然后将此分配变量的基本文本表示发送回 ajax/fetch 回调，它只是alerted

我希望，这应该可以让您清楚地了解如何使用 Ajax 来设置会话变量。您可以扩展逻辑并一次发送许多值，转换为 JSON 并存储在会话变量中。

这个简单的函数sessionvalue接受一个参数——即会话变量的名称。如果找到，它将用作原始字段的值。

<?php
    session_start();
    
    if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['username'] ) ){
        $_SESSION['username']=$_POST['username'];
        exit($_SESSION['username']);
    }

    function sessionvalue( $field=false ){
        return !empty( $_SESSION[ $field ] ) ? $_SESSION[ $field ] : '';
    }

?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
    </head>
    <body>
        <form name='users' method='post'>
            <input type='text' name='username' value='<?=sessionvalue('username');?>' />
            <input type='button' value='Submit' />
        </form>
        <script>
            document.querySelector('input[type="button"]').addEventListener('click',function(e){
                let fd=new FormData( document.forms.users );
                    
                fetch(location.href,{method:'post',body:fd})
                    .then( r=>r.text() )
                    .then( text=>{
                        alert(text)
                    })
            });
        </script>
    </body>
</html>

推荐阅读