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 相关文章推荐
javascript 二维数组的实现与应用
Mar 16 Javascript
web前端开发也需要日志
Dec 09 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
json数据的列循环示例
Sep 06 Javascript
JavaScript实现列出数组中最长的连续数
Dec 29 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
Mar 09 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
关于使用js算总价的问题
Jun 23 Javascript
基于js实现抽红包并分配代码实例
Sep 19 Javascript
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 excel reader读取excel内容存入数据库实现代码
2012/12/06 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
php字符串比较函数用法小结(strcmp,strcasecmp,strnatcmp及strnatcasecmp)
2016/07/18 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
validator验证控件使用代码
2010/11/23 Javascript
node.js中的path.resolve方法使用说明
2014/12/08 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
Angular实现的简单查询天气预报功能示例
2017/12/27 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
python实现简易数码时钟
2021/02/19 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
python issubclass 和 isinstance函数
2019/07/25 Python
基于Python的图像数据增强Data Augmentation解析
2019/08/13 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
将pymysql获取到的数据类型是tuple转化为pandas方式
2020/05/15 Python
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
UNIX特点都有哪些
2016/04/05 面试题
汽车销售求职自荐信
2013/10/01 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
汽车促销活动方案
2014/03/31 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
手机销售员岗位职责
2015/04/11 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
三傻大闹宝莱坞观后感
2015/06/03 职场文书
公司员工违法违章行为检讨书
2019/06/24 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
HTML常用标签超详细整理
2022/03/19 HTML / CSS