jQuery AJAX发布内容实例代码

为什么80%的码农都做不了架构师？>>>   

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

传统方法发布内容

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

jQeury AJAX方法发布内容

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

<form id="form1" οnsubmit="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" οnsubmit="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 发布内容，还可以在前台页面使用 JavaScript 验证表单，但我觉得这样做太麻烦，前台JS代码验证一次，到后台服务器脚本中还需要验证一次，干脆使用 jQuery AJAX 进行提交发布内容只在服务器脚本验证表单。

转载于:https://my.oschina.net/4ever/blog/884008