April 25, 2015
HomePhp / Pear / Mysql / Node.jsphp AutoSave 自动保存

php AutoSave 自动保存

By  Php / Pear / Mysql / Node.js  0 Comments

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);

 

 

 

Loading

Related Posts

  • mysql数据库查询优化

    上两周一直想办法提高查询速度，取得一点效果，解决了部分问题，记下来以便将来自己查看。   由于公司没有专门的DBA，我自己对mysql数据库也不是很熟悉，而且这个JAVA开发的网络审计系统的管理系统，是经过了N多人几年时间的修修改改，今天到我们手里，要改成能支持大流量情况的版本，所以对我们这个只有几个人的JAVA组来说，确实是个难题。   这个大流量的情况在以前的文章里也提到过，就是要支持每秒钟处理1G左右的网络数据包，HTTP协议的数据包最多，因此HTTP协议分析模块的流水 日志表记录最大，据估算可能到达一天4000万条记录，采用一天一张表，那也是很大的，我看了.MYD文件大小，已经是8G多了。   而我们管理系统查询日志记录时，对好几个字段都要进行条件查询，而且有几个字段长度达到256，在8G这么大的表里查询一个字符串，如果找不到，那 必定从头要查到尾，速度慢得根本受不了。客户还要好几个字段一起设置条件来查询，这样基本上是二三十分钟都出不来，系统可用性极差。…

  • mysql 复制表数据，表结构的3种方法

    什么时候我们会用到复制表？例如：我现在对一张表进行操作，但是怕误删数据，所以在同一个数据库中建一个表结构一样，表数据也一样的表，以作备份。如果用mysqldump比较麻烦，备份.MYD,.MYI这样的文件呢，操作起来也还是麻烦。   一，复制表结构 方法1: mysql> create table a like…

  • PHP开发人员常犯的10个MysqL错误

    对于大多数web应用来说，数据库都是一个十分基础性的部分。如果你在使用PHP，那么你很可能也在使用MySQL—LAMP系列中举足轻重的一员。   对于很多新手们来说，使用PHP可以在短短几个小时之内轻松地写出具有特定功能的代码。但是，构建一个稳定可靠的数据库却需要花上一些时日和相关技能。下面列举了我曾经犯过的最严重的10个MySQL相关的错误（有些同样也反映在其他语言/数据库的使用上）。   1、使用MyISAM而不是InnoDB MySQL有很多数据库引擎，但是你最可能碰到的就是MyISAM和InnoDB。 MySQL 默认使用的是MyISAM。但是，很多情况下这都是一个很糟糕的选择，除非你在创建一个非常简单抑或实验性的数据库。外键约束或者事务处理对于数据完整性 是非常重要的，但MyISAM都不支持这些。另外，当有一条记录在插入或者更新时，整个数据表都被锁定了，当使用量增加的时候这会产生非常差的运行效率。…

Related Posts

About Author

Gideon

Add a Comment

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.