文档章节

jQuery AJAX发布内容实例代码

OSC老司机
 OSC老司机
发布于 2017/04/20 22:16
字数 661
阅读 27
收藏 0

我新建的另一个网站,萝莉图 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 进行提交发布内容只在服务器脚本验证表单。

本文转载自:http://aowana.com/content/1602/jquery-ajax-add-conent.html

共有 人打赏支持
OSC老司机
粉丝 13
博文 33
码字总数 3554
作品 0
宁德
个人站长
私信 提问
jquery的extend和fn.extend

jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给...

crazyinsomnia
2010/01/10
1K
1
jquery.fn.extend与jquery.extend

jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn....

i33
2012/06/29
0
0
jquery.fn.extend与jquery.extend

jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象添加方法。 fn 是什么东西...

柒月-小妖精
2013/09/06
0
0
jQuery 1.11.3 和 2.1.4 发布,iOS 安全版本

jQuery 1.11.3 和 2.1.4 发布, 修复了 iOS 8.2 and 8.3上一个罕见的错误。 查看代码: https://code.jquery.com/jquery-1.11.3.js https://code.jquery.com/jquery-2.1.4.js 更多内容请看发......

oschina
2015/04/29
10.1K
19
使用谷歌jquery库文件的理由

使用谷歌jquery库文件的理由 最近看到,那些引用jquery的文件那些网站,好多是使用谷歌的库;像这样的<script type=”text/javascript”src=”http://ajax.googleapis.com/ajax/libs/jquery...

天外飘雪
2012/07/18
0
1

没有更多内容

加载失败,请刷新页面

加载更多

创建多个git账号

实习开发中我们可能一个机子上配置多个git账号,如github.com,oschina.com 或者工作账号,私人账号,这时候就2个账号用一个key,肯定会冲突,有一个会提示没权限(账号和密码对应不上) ssh ...

echojson
27分钟前
1
0
rabbitmq安装教程

RabbitMQ有Windows与Linux版本的,这里先写Windows版本的安装。 以前安装软件总是在百度上找某某安装教程,结果能按照教程安装好的软件真的不多。想起先前以为大牛说的一句话,去官网按照官网...

em_aaron
今天
7
0
Android 贝塞尔曲线实践——波浪式运动

一、波浪效果如下 贝塞尔曲线自定义波浪效果的案例很多,同样方法也很简单,大多数和本案例一样使用二次贝塞尔曲线实现,同样还有一种是PathMeasure的方式,这里我们后续补充,先来看贝塞尔曲...

IamOkay
今天
3
0
Nmap之防火墙/IDS逃逸

选项 解释 -f 报文分段 --mtu 指定偏移大小 -D IP欺骗 -sI 原地址欺骗 --source-port 源端口欺骗 --data-length 指定发包长度 --randomize-hosts 目标主机随机排序 --spoof-mac Mac地址欺骗 ...

Frost729
今天
2
0
带你搭一个SpringBoot+SpringData JPA的环境

不知道大家对SpringBoot和Spring Data JPA了解多少,如果你已经学过Spring和Hibernate的话,那么SpringBoot和SpringData JPA可以分分钟上手的。 其实我在学完SpringBoot和SpringData JPA了之...

java菜分享
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部