设为首页 收藏本站

运维网

 找回密码
 立即注册
查看: 387|回复: 0

[经验分享] php AutoSave 自动保存

[复制链接]
yanfei

尚未签到
发表于 2017-3-28 11:52:24 | 显示全部楼层 |阅读模式
　　One element that I had to build recently was a auto-saver on a page editor.
　　As I thought this was a nifty little method in jQuery I built, I thought I’d share it.
This will take all fields in the form, wrap them up in an object and post them with an AJAX query to the url specified.
　　Full working HTML example available on GitHub:
　　https://github.com/glynrob/Autosave
　　I use jQuery for most javascript functions I am trying to do as it cuts out allot of the work for multiple browsers and writing clear code.
　　So to use jQuery on your site you add either use the jQuery library saved on your server or the Google hosted location.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
　　So the first thing you need to do is to setup the timer to call a function after 60 seconds.

<script type="text/javascript">
<!--
var t;
$(document).ready(function() {
t = setTimeout("autosave()", 60000); // timer after 60 seconds
});
　　Now we create the function which will take the content of all fields inside the form ready for posting to your ajax call.
　　
For elements that are an array you have to put a check in place to detect this. In my example I used the input array of “interests”.

function autosave(last)
{
if (typeof t!="undefined") {clearTimeout(t);} // reset timer
var data = new Object();
var interests = new Object();
var interestscount = 0;
$('#myform input,#myform textarea,#myform select').each(function(index) {
if ($(this).is(':submit')){
// ignore submit buttons
} else {
if ($(this).is(':checkbox')){
if ($(this).attr('checked')){
data[$(this).attr('name')] = $(this).val();
} else {
data[$(this).attr('name')] = '0';
}
} else {
if ($(this).attr('name') == 'interests[]'){ // if input is an array
interests[interestscount] = $(this).val();
interestscount = interestscount + 1;
} else { // if normal input
data[$(this).attr('name')] = $(this).val();
}
}
}
data['interests'] = interests;
});
// AJAX CALL ADDED HERE
}

　　You now replace the // AJAX CALL ADDED HERE with the following ajax code
This call will send all the content in the variable data to the URL you specify which can then save the content on the server side.
　　
I used my ajax response as 1 – success, 2 – user timed out, and all other responses as fails.

$.ajax(
{
type: "POST",
url: "/ajax/autosave",
data: data,
cache: false,
success: function(message)
{
if (message == '1'){ // show success saved
t = setTimeout("autosave()", 60000); // set timer for next autosave
} else if (message == '2'){ // show error
var answer = confirm("Your session has timed out. Please login again to continue")
if (answer){
window.location = "/signin";
}
} else { // an error has occured
t = setTimeout("autosave()", 120000); // set the time for a larger amount
}
//alert(message); // for testing purposes
}
});
　　Finally you can add your form to the HTML.
　　
This is my example but it does not matter what form fields you have as they will all be posted to the ajax location you specify.
　　
Not any array input values though as these are special cases – i.e. “interests” in my example.

<form method="post" id="myform" action="/saveform">
Name: <input name="name" type="text" value="" /><br />
Address: <textarea name="address"></textarea><br />
Gender: <select name="gender">
<option value="M">Male</option>
<option value="F">Female</option>
</select><br />
Interests:<br />
1: <input name="interests[]" type="text" value="" /><br />
2: <input name="interests[]" type="text" value="" /><br />
3: <input name="interests[]" type="text" value="" /><br />
4: <input name="interests[]" type="text" value="" /><br />
5: <input name="interests[]" type="text" value="" /><br />
Sign up for our newsletter: <input name="signup" type="checkbox" value="1" /><br />
<input name="submit" type="submit" value="Submit" />
</form>
　　Full working HTML example available on GitHub:
　　https://github.com/glynrob/Autosave
　　原文：https://glynrob.com/javascript/autosave/
　　全代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Example Auto Save</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
<!--
var t;
$(document).ready(function() {
t = setTimeout("autosave()", 6000); // set timer to run every 60 seconds
});
function autosave(last)
{
if (typeof t!="undefined") {clearTimeout(t);} // reset timer
var data = new Object();
var interests = new Object();
var interestscount = 0;
$('#myform input,#myform textarea,#myform select').each(function(index) {
if ($(this).is(':submit')){
// ignore submit buttons
} else {
if ($(this).is(':checkbox')){
if ($(this).attr('checked')){
data[$(this).attr('name')] = $(this).val();
} else {
data[$(this).attr('name')] = '0';
}
} else {
if ($(this).attr('name') == 'interests[]'){ // if input is an array
interests[interestscount] = $(this).val();
interestscount = interestscount + 1;
} else { // if normal input
data[$(this).attr('name')] = $(this).val();
}
}
}
data['interests'] = interests;
});
$.ajax(
{
type: "POST",
url: "autosave.php",
data: data,
cache: false,
success: function(message)
{
//alert(message);
// show success saved
if (message == '1')
{
t = setTimeout("autosave()", 6000); // set timer for next autosave
}
// show error
else if (message == '2')
{
var answer = confirm("Your session has timed out. Please login again to continue")
if (answer) window.location = "/signin";
}
// an error has occured
else
{
t = setTimeout("autosave()", 12000); // set the time for a larger amount
}
//alert(message); // for testing purposes
}
});
}
//-->
</script>
</head>
<body>
Just a normal form with your fields
<form accept-charset="UTF-8" method="post" id="myform" action="/saveform">
Name: <input name="name" type="text" value="" /><br />
Address: <textarea name="address"></textarea><br />
Gender: <select name="gender">
<option value="M">Male</option>
<option value="F">Female</option>
</select><br />
Interests:<br />
1: <input name="interests[]" type="text" value="" /><br />
2: <input name="interests[]" type="text" value="" /><br />
3: <input name="interests[]" type="text" value="" /><br />
4: <input name="interests[]" type="text" value="" /><br />
5: <input name="interests[]" type="text" value="" /><br />
Sign up for our newsletter: <input name="signup" type="checkbox" value="1" /><br />
<input name="submit" type="submit" value="Submit" />
</form>
</body>
</html>
　　autosave.php

<?php
print_r($_POST);

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表，该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有，请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意，请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息，一经发现立即删除。若您因此触犯法律，一切后果自负，我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集，我们仅提供一个展示、介绍、观摩学习的平台，我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责，亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏，不得用于商业或者其他用途，否则，一切后果均由您自己承担，我们对此不承担任何法律责任
7、如涉及侵犯版权等问题，请您及时通知我们，我们将立即采取措施予以解决
8、联系人Email：admin@iyunv.com 网址：www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址：https://www.yunweiku.com/thread-356436-1-1.html 上篇帖子： PHP处理海量数据实战 下篇帖子： PHP使用文件和目录
回复

使用道具 举报

返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群，最新一手资源尽在官方微信交流群！快快加入我们吧...

扫描微信二维码查看详情

客服 E-mail:iyunvcom@gmail.com

本站由青云提供云计算服务

运维网--中国最专业的运维工程师交流社区

豫ICP备20007574号-1 Copyright © 2012-2025

关于我们

发展历程

联系我们

关注我们

广告服务

广告案例

隐私条款

免责声明

用户登录

用户注册

版主守则

申请版主

手机版

金币获取

帮助中心

每日签到

Good Good

Study

Day Day

UP


客服E-mail:kefu@iyunv.com 客服QQ：1061981298


QQ群⑦：运维网交流群⑦ QQ群⑧：运维网交流群⑧ k8s群：运维网kubernetes交流群


提醒：禁止发布任何违反国家法律、法规的言论与图片等内容；本站内容均来自个人观点与网络等信息，非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来，其版权均归原作者及其网站所有，我们尊重他人的合法权益，如有内容侵犯您的合法权益，请及时与我们联系进行核实删除！



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表