使用jquery和php自动保存表单数据_Php_Jquery

使用jquery和php自动保存表单数据

php jquery

使用jquery和php自动保存表单数据,php,jquery,Php,Jquery,我对PHP很在行，但对jQuery完全不在行，而且一直在自动保存表单数据 autosave函数在dummy.php中每隔30秒调用一次。我正在将用于处理（->数据库）的序列化表单数据发送到savetest.php 此刻，我被这个问题困住了：如何让savetest.php监听传入数据并对其做出反应？ <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> &l

我对PHP很在行，但对jQuery完全不在行，而且一直在自动保存表单数据

autosave

函数在

dummy.php

中每隔30秒调用一次。我正在将用于处理（->数据库）的序列化表单数据发送到

savetest.php

此刻，我被这个问题困住了：

如何让
savetest.php
监听传入数据并对其做出反应？

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="../../_include/jquery-1.9.1.min.js"></script>
</head>
<body>
    <h1>My Form</h1>
    <form name="form1" id="form1" method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>"> 
        <input type="radio" name="item_2_1" id="c_2_1_0" value="0" />
        <input type="radio" name="item_2_1" id="c_2_1_1" value="1" />
        <input type="radio" name="item_2_1" id="c_2_1_2" value="2" />
        <input type="radio" name="item_2_1" id="c_2_1_3" value="3" />
        <input type="checkbox" name="item_3_1[]" id="c_3_1_0" value="yes" />
        <input type="checkbox" name="item_3_1[]" id="c_3_1_1" value="no" />
        <input type="text" name="item_4_1" id="c_4_1_0" />
    </form>

<script type="text/javascript">
    function autosave() {
         jQuery('form').each(function() {
         jQuery.ajax({
                url: 'savetest.php',
                data: {
                'autosave' : true,
                'formData' : jQuery(this).serialize()},
                type: 'POST',
                success: function(data){
                    if(data && data == 'success') {
                        alert("OK!");
                    }else{
                        alert("Oh no!");
                    }
                }// end successful POST function
            }); // end jQuery ajax call
        }); // end setting up the autosave on every form on the page
    }// end function autosave()

    jQuery(function($) {
        setInterval(autosave, 30 * 1000);
    });
</script>

在这一刻，我得到了警告“哦，不！”（不成功）每30秒一次

以下是我的简短示例代码：

dummy.php
，代码片段1（HTML和php）：

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="../../_include/jquery-1.9.1.min.js"></script>
</head>
<body>
    <h1>My Form</h1>
    <form name="form1" id="form1" method="post" action="<?php echo $_SERVER['PHP_SELF'] ?>"> 
        <input type="radio" name="item_2_1" id="c_2_1_0" value="0" />
        <input type="radio" name="item_2_1" id="c_2_1_1" value="1" />
        <input type="radio" name="item_2_1" id="c_2_1_2" value="2" />
        <input type="radio" name="item_2_1" id="c_2_1_3" value="3" />
        <input type="checkbox" name="item_3_1[]" id="c_3_1_0" value="yes" />
        <input type="checkbox" name="item_3_1[]" id="c_3_1_1" value="no" />
        <input type="text" name="item_4_1" id="c_4_1_0" />
    </form>

<script type="text/javascript">
    function autosave() {
         jQuery('form').each(function() {
         jQuery.ajax({
                url: 'savetest.php',
                data: {
                'autosave' : true,
                'formData' : jQuery(this).serialize()},
                type: 'POST',
                success: function(data){
                    if(data && data == 'success') {
                        alert("OK!");
                    }else{
                        alert("Oh no!");
                    }
                }// end successful POST function
            }); // end jQuery ajax call
        }); // end setting up the autosave on every form on the page
    }// end function autosave()

    jQuery(function($) {
        setInterval(autosave, 30 * 1000);
    });
</script>

这是
savetest.php
：

if (isset($_POST)) {
var_dump($_POST);
exit();
} else {
    echo 'Hi, no $_POST.';
}

不幸的是，仍然是不成功的警报。。。和

savetest.php

dumping

array（0）{}

：-(

这将检查数据是否已发布，

//其余数据

应表示页面生成的所有其他未进行任何处理的代码

另外，我可以建议清除该数据属性吗

data: {
    'navigation': 'save',
    'autosave' : true,
    'formData' : jQuery(this).serialize()
}

然后在服务器端，您可以像平常一样访问它，

$\u POST['navigation']

和

$\u POST['formData']

包含

name=value

组合的数组

此外，您的函数应该在

$（document）.ready

内，或者类似以下内容：

jQuery(function($){
    //the rest of your code
});

jQuery（函数（$）

将作为

$（文档）运行。ready

并在该函数内将

符号别名为

jQuery

这应该涵盖所有基础。

谢谢你的建议。请参阅我的编辑-->不幸的是，我仍然收到

哦，不

警报…知道为什么吗？@michi你对

数据参数进行了调整了吗？它看起来还是一样的，而且，你也可以只做如果（isset（$\u POST））
暂时，然后像这样将其转储回->echo''，打印（$\u POST，TRUE），“”；
@michi让我保持更新，以便我可以确保您已解决此问题。请参阅我的编辑-我现在将数据发送到另一个php文件，但仍然没有成功。如果您使用AJAX，您确实应该让它调用与调用页面不同的单独后端脚本。为什么数据='success'？数据是服务器响应，在这种情况下是var_dump不是字符串“success”。@xmarston好的，我可以在var_dump
（）之后回显“success”吗？@michi否，因为服务器响应将不仅仅是“success”，它将是var_dump（）和“success”，尝试只回显“success”。@michi（1）您可以检查php文件收到了什么回显var_dump（$\u POST）就像你以前在ajax的success函数中使用console.log（data）一样。你可以在Firebug控制台（Firefox）或Chrome控制台中看到这一点。（2）有很多方法，通过你的代码，你可以自动保存web上的所有现有表单，如果你只想自动保存某个表单，并且该表单有一个id，那么最好的方法就是这样做$（'#formid）或在ajax调用之前，如果（$（this.prop（'id'）='form1'），请检查表单的id是否是您想要执行的id。