jQuery AJAX发布内容实例代码分享

2017年04月20日 18:25   站长学院   jQuery  

我新建的另一个网站,萝莉图 http://luolitu.com 今天发布内容的时候因为表单填写不规范,系统提示返回导致表单中填空的内容丢失,瞬间觉得如果使用了AJAX该多好,本文介绍如何使用 jQuery AJAX发布内容,并且分享实例代码。

传统方法发布内容

先看看传统方法如何发布内容,使用 <form action="URL"> 标签创建表单,通过 <button type="submit"> 进行提交,这种方法简单、兼容性强,但缺点就是容易丢失表单中填写的内容。

jQeury AJAX方法发布内容

jQuery 相信很多人都在使用,今天通过分享实例代码说说如何利用 jQuery AJAX 发布内容,首先看下面的 HTML 代码:

<form id="form1" onsubmit="return false">
<input type="hidden" name="id" value="0">
<table width="100%" cellspacing="1" cellpadding="10">
	<tr class="row">
		<td style="text-align: right">标 &nbsp; 题</td>
		<td><input type="text" name="title" value="" class="ipt ipt-b"></td>
	</tr>
	<tr class="row">
		<td style="text-align: right">关 键 词</td>
		<td><input type="text" name="keywords" value="" class="ipt ipt-b"></td>
	</tr>
	<tr class="row">
		<td style="text-align: right">描述信息</td>
		<td><textarea name="description" class="ipt ipt-b" style="height: 80px; resize: none"></textarea></td>
	</tr>

	<tr class="row">
		<td style="text-align: right; vertical-align: top">图片信息</td>
		<td>
			<textarea id="imgs001" name="imgs" style="width: 95%; height: 420px; resize: none" class="ipt"></textarea>
		</td>
	</tr>

	<tr>
		<td>&nbsp;</td>
		<td>
			<button type="button" id="btn-submit">确认</button>
		</td>
	</tr>
</table>
</form>
不同之处在于 <form id="form1" onsubmit="return false"> ,只有 id属性和防止表单提交的 return false ,
另一个不同的地方是 <button type="button" id="btn-submit"> ,普通按钮 id属性为 btn-submit ,
接下了,一起来看对应的 JavaScript 代码,注意页面中必须载入 jQuery 库,否则代码将无效。
<script type="text/javascript">
$('#btn-submit').on('click', function(){
	$.ajax({
		//dataType : 'json',
		dataType : 'html',
		type : 'post',
		url : 'myroot/tupian.php?action=post&is_add=1',
		data : $('#form1').serialize(),
		error : function(){
			alert('AJAX 请求错误')
		},
		beforeSend : function(){
			$('#btn-submit').attr('disabled', 'disabled').html('loading')
		},
		success : function(data){
			if ( data == 'ok') {
				alert('图片发布成功!')
				location.href = 'tupian.php'
			} else {
				alert(data);
			}
		},
		complete : function(){
			$('#btn-submit').removeAttr('disabled').html("确认")
		}
	})
})
</script>
jQeury AJAX 非常简单而且功能强大, 其中 beforeSend 和 complete 根据自己的情况进行编写,我只是简单地禁用按钮和提示 loading 。

至于 myroot/tupian.php?action=post&is_add=1 是服务器端程序的地址,大家根据自己的需求开发就行。

jQuery AJAX效果

除了使用 jQuery AJAX 发布内容,还可以在前台页面使用 JavaScript 验证表单,但我觉得这样做太麻烦,前台JS代码验证一次,到后台服务器脚本中还需要验证一次,干脆使用 jQuery AJAX 进行提交发布内容只在服务器脚本验证表单。

相关阅读

jQuery $.ajax() 提交表单操作实例
jQuery 缩略图插件 jQThumb
jQuery 上传插件 ajaxupload 设置 json
jQuery 还可以输入多少字 inputTotal()
分享禁止右键等常用的 jQuery小技巧