jQuery ajaxForm()的应用


Posted in Javascript onOctober 14, 2016

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);
%>

七、效果如下:

jQuery ajaxForm()的应用

以上所述是小编给大家介绍的ajaxForm()的应用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 弹出登录窗口实现代码
Dec 24 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
Aug 21 Javascript
jquery 字符串切割函数substring的用法说明
Feb 11 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 Javascript
JS自定义混合Mixin函数示例
Nov 26 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
AngularJS表单验证功能
Oct 19 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
Vue 实例中使用$refs的注意事项
Jan 29 Vue.js
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 #Javascript
jQuery如何防止Ajax重复提交
Oct 14 #Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 #Javascript
浅析JS中对函数function的理解(基础篇)
Oct 14 #Javascript
js插件Jcrop自定义截取图片功能
Oct 14 #Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 #Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 #Javascript
You might like
php 文件上传类代码
2011/08/06 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
Knockoutjs的环境搭建教程
2012/11/26 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
基于jquery实现的文字淡入淡出效果
2013/11/14 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
详解如何在你的Vue项目配置vux
2018/06/04 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
bootstrap下拉分页样式 带跳转页码
2018/12/29 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
学前端,css与javascript重难点浅析
2020/06/11 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
新手如何快速入门Python(菜鸟必看篇)
2017/06/10 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
Python如何在bool函数中取值
2020/09/21 Python
Anaconda详细安装步骤图文教程
2020/11/12 Python
CSS实现鼠标滑过鼠标点击代码写法
2016/12/26 HTML / CSS
介绍一下Mysql的存储引擎
2015/02/12 面试题
金融专业求职信
2014/08/05 职场文书
2019企业文化管理制度范本!
2019/08/06 职场文书
2019垃圾分类宣传口号汇总
2019/08/16 职场文书
python如何获取网络数据
2021/04/11 Python
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang