jQueryajaxForm()的应用
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
jQueryajaxForm()的应⽤
jQuery Form插件是⼀个优秀的Ajax表单插件,可以⾮常容易地、⽆侵⼊地升级HTML表单以⽀持Ajax。
提供了很多有⽤的⽅法可以让你轻松的处理表单⾥的数据和表单的提交过程。
本⽂就是介绍了ajaxForm()的应⽤.
⼀、ajaxForm() 介绍
ajaxForm预处理将要使⽤ AJAX ⽅式提交的表单,将所有需要⽤到的事件监听器添加到其中。
它不是提交这个表单。
在页⾯的ready函数⾥使⽤ajaxForm来给你页⾯上的表单做这些AJAX提交的准备⼯作。
ajaxForm 需要零个或⼀个参数。
这唯⼀的⼀个参数可以是⼀个回调函数或者是⼀个可选参数对象。
是否可以连环调⽤: 是。
⼆、引⼊依赖的js
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
三、编写页⾯
<form id="myForm" action="demo.jsp" method="post">
名称: <input type="text" name="name" /> <br/>
地址: <input type="text" name="address" /><br/>
⾃我介绍: <textarea name="comment"></textarea> <br/>
<input type="submit" id="test" value="提交" /> <br/>
<div id="output1" style="display:none;"></div>
</form>
四、调⽤ajaxForm() ⽅法
<script type="text/javascript">
$(document).ready(function() {
$('#myForm').ajaxForm(function() {
$('#output1').html("提交成功!欢迎下次再来!").show();
});
});
</script>
五、详细代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery Form插件例⼦-ajaxForm()</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="jquery-1.3.1.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myForm').ajaxForm(function() {
$('#output1').html("提交成功!欢迎下次再来!").show();
});
});
</script>
</head>
<body>
<h3> Demo 1 : form插件的使⽤--ajaxForm(). </h3>
<form id="myForm" action="demo.jsp" method="post">
名称: <input type="text" name="name" /> <br/>
地址: <input type="text" name="address" /><br/>
⾃我介绍: <textarea name="comment"></textarea> <br/>
<input type="submit" id="test" value="提交" /> <br/>
<div id="output1" style="display:none;"></div>
</form>
</body>
</html>
六、编写接收表单的测试代码。
demo.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");//防⽌乱码!
String name = request.getParameter("name");
String address = request.getParameter("address");
String comment = request.getParameter("comment");
System.out.println(name + " " +address + " " +comment);
%>
七、效果如下:
以上所述是⼩编给⼤家介绍的ajaxForm()的应⽤,希望对⼤家有所帮助,如果⼤家有任何疑问请给我留⾔,⼩编会及时回复⼤家的。
在此也⾮常感谢⼤家对⽹站的⽀持!。