jQuery插件之Form分享-智言个人博客

一、jQuery.Form.js 插件的作用是实现Ajax提交表单。

方法：

1.formSerilize()　　用于序列化表单中的数据，并将其自动整理成适合AJAX异步请求的URL地址格式。

2.clearForm()　　清除表单中所有输入值的内容。

3.restForm　　重置表单中所有的字段内容。即将所有表单中的字段恢复到页面加载时的默认值。

疑问：ajaxForm()与ajaxSubmit()的区别：

答案：$(“#form1”).ajaxForm();相当于以下两行：

$(“#form1”.submit)(function(){

$(“#form1”).ajaxSubmit();

return false;

})

也就是说ajaxFrom()会自动阻止表单提交。而ajaxSubmit()不会自动阻止表单提交，想阻止表单提交，要自己return false;

技巧1：如果希望表单提交完成后不跳转，那么一行简单的代码就能够实现，几乎与不使用表单提交是一样的:

$("#MailForm").ajaxSubmit(function(message) {
　　alert("表单提交已成功!");
});

注意:ajaxForm()与ajaxForm()都可以没有参数或者接受1个参数。该参数既可以是一个回调函数，也可以是一个options对象。该对象功能非常强大，说明如下:

var options={

url:url,　　　　　　//form提交数据的地址

type:type,　　　 //form提交的方式(method:post/get)

target:target,　　//服务器返回的响应数据显示在元素(Id)号确定

beforeSubmit:function(),　　//提交前执行的回调函数

success:function(),　　　　 //提交成功后执行的回调函数

dataType:null,　　　　　　　//服务器返回数据类型

clearForm:true,　　　　　　 //提交成功后是否清空表单中的字段值

restForm:true,　　　　　　 //提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态

timeout:6000 　　　　　　 //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)。

}

例子：

页面js代码：

<script type="text/javascript">
//后台请求地址
//var serverurl = 'http://203.195.194.28/php/getsign.php';
//var serverurl = 'http://203.195.194.28/node';
//var serverurl = 'http://203.195.194.28/python';
var serverurl = 'getsign.php';

$(document).ready(function() {
	initUploadForm();
});

$('input[name=FileContent]').change(function () {
	initUploadForm();
});

$('body').on('click', '#downloadBtn', function(){
	$('#downloadImg').attr('src', $('#downloadUrl').text());
});

$('body').on('click', '#deleteBtn', function(){
	var manageUrl = $('#url').text();
	if (!manageUrl) {
		alert('尚未获取管理url');
		return false;
	}
	manageUrl = manageUrl + '/del';
	// 请将以下获取签名的链接换成您部署好的服务端http url
	// 建议通过业务登陆态检查来增强安全性，避免签名被非法获取
	$.getJSON(serverurl + '?type=delete&url='+encodeURIComponent(manageUrl), function(data) {
		var sign = data.sign,
			url = manageUrl + '?sign=' + encodeURIComponent(sign);
		$.ajax({
		    type: "POST",
		    url: url,
		    data: {},
		    success: function() {
		  	    alert('删除成功');
		    },
		    contentType:"multipart/form-data",
		    dataType: 'json'
		});
	});
});

$('body').on('click', '#copyBtn', function(){
	var manageUrl = $('#url').text();
	if (!manageUrl) {
		alert('尚未获取管理url');
		return false;
	}
	manageUrl = manageUrl + '/copy';
	// 请将以下获取签名的链接换成您部署好的服务端http url
	// 建议通过业务登陆态检查来增强安全性，避免签名被非法获取
	$.getJSON(serverurl + '?type=copy&url='+encodeURIComponent(manageUrl), function(data) {
		var sign = data.sign,
			url = manageUrl + '?sign=' + encodeURIComponent(sign);
		$.ajax({
		    type: "POST",
		    url: url,
		    data: {},
		    success: function(ret) {
		  	    alert('复制成功');
		    },
	    	error:function(ret) {
	    		alert(ret.responseText);
	    	},
		    contentType:"multipart/form-data",
		    dataType: 'json'
		});
	});
});

$('body').on('click', '#queryBtn', function(){
	var manageUrl = $('#url').text();
	if (!manageUrl) {
		alert('尚未获取管理url');
		return false;
	}
	$.ajax({
	    type: "GET",
	    url: manageUrl,
	    data: {},
	    success: function(data) {
	  	    $('#imgInfo').text(JSON.stringify(data));
	    },
	    error:function(ret) {
	    	$('#imgInfo').text(ret.responseText);
	    },
	    dataType: 'json'
	});
});

function initUploadForm () {
	// 请将以下获取签名的链接换成您部署好的服务端http url
	// 建议通过业务登陆态检查来增强安全性，避免签名被非法获取
	$.getJSON(serverurl, function(data) {
		var sign = data.sign,
			url = data.url + '?sign=' + encodeURIComponent(sign);

		var options = { 
            type: 'post',
            url: url,
            dataType: 'json',
		    success:function(ret) { 
		    	$('#downloadUrl').html(ret.data.download_url);
		    	$('#fileid').text(ret.data.fileid);
		    	$('#url').text(ret.data.url);
		    	$('#downloadRet').show();
		    },
		    error:function (ret) {
		    	alert(ret.responseText);
		    }
		}; 
		 
		// pass options to ajaxForm 
		$('#uploadForm').ajaxForm(options);
	});
}

</script>

页面HTML代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>腾讯云万象优图 - 示例程序</title>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="jquery.form.min.js"></script>
</head>

<div>
	<h2>腾讯云万象优图 - 示例程序</h2>
    <form id="uploadForm">
    	<input type="file" name="FileContent"></input>
    	<input id="subbtn" type="submit">
    </form> 

 	<div id="downloadRet" style="display:none">
 		<h3>下载链接</h3>
 		<span id="downloadUrl"></span><input id="downloadBtn" type="button" value="下载"><br/>
 		<img id="downloadImg" src=""></img>
 		<h3>文件ID</h3>
 		<div id="fileid"></div>
 		<h3>管理URL</h3>
 		<span id="url"></span>&nbsp;&nbsp;<input id="queryBtn" type="button" value="查询">&nbsp;&nbsp;<input id="deleteBtn" type="button" value="删除">&nbsp;&nbsp;<input id="copyBtn" type="button" value="复制"><br/>
 		<span id="imgInfo"></span>
 	</div>
</div>


</body>
</html>

后台getsign.php代码：

<?php

require 'include.php';

//生成新的上传签名
//以下信息请到http://console.qcloud.com/image/bucket获取
$bucket = 'test1';     // 空间名称
$projectId = '10000002';  // 项目ID
$userid = 0;              // 用户ID 可以自定义 默认为0

$fileid = 'sample'.time();  // 自定义文件名
//生成新的上传签名
$url = TencentyunImageV2::generateResUrl($bucket, $userid, $fileid);
$expired = time() + 999;
$sign = TencentyunAuth::getAppSignV2($bucket, $fileid, $expired);
$ret = array('url' => $url,'sign' => $sign);
exit(json_encode($ret));

?>

今天在整合万象优图的时候学习到的，虽然对于高手来说很简单了，但是对于我来说，这是一个增长，无论它难易，对于我的价值是无限的。