博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery学习笔记(jquery.form插件)
阅读量:6524 次
发布时间:2019-06-24

本文共 4259 字,大约阅读时间需要 14 分钟。

官网:

jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地、无侵入地升级HTML表单以支持Ajax。jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能。另外,插件还包括其他的一些方法: formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等。

1. 核心方法 -- ajaxForm() 和 ajaxSubmit()

首先要引用两个脚本文件:

然后,在脚本中用下面两段代码中的任意一个:

$(document).ready(function() {     $('#myForm').ajaxForm(function() {          $('#output1').html("提交成功!欢迎下次再来!").show();       });   });
$(document).ready(function() {      $('#myForm').submit(function() {        $(this).ajaxSubmit(function() {                  $('#output1').html("提交成功!欢迎下次再来!").show();           });        return false; //阻止表单默认提交    });  });

通过Form插件的两个核心方法,都可以在不修改表单的HTML代码结构的情况下,轻易地将表单的提交方式升级为Ajax提交。

注意:ajaxSubmit()时,需要加入return false行阻止表单默认提交,否则表单将提交再次。

一直不知道ajaxForm()与ajaxSubmit()方法具体有何差异,应用时应当注意什么,有知道的朋友希望告诉我。

2. ajaxForm() 和 ajaxSubmit() 参数

 ajaxForm() 和 ajaxSubmit()都能接受0个或1个参数,当为单个参数时,该参数既可以是一个回调函数,也可以是一个options对象,上面的例子就是回调函数,下面介绍options对象,使得它们对表单拥有更多的控制权。

$(document).ready(function() {     var options = {         target:        '#output1',   // 用服务器返回的数据 更新 id为output1的内容.        beforeSubmit:  showRequest,  // 提交前        success:       showResponse,  // 提交后         //另外的一些属性:         //url:       url         // 默认是form的action,如果写的话,会覆盖from的action.         //type:      type        // 默认是form的method,如果写的话,会覆盖from的method.('get' or 'post').        //dataType:  null        // 'xml', 'script', or 'json' (接受服务端返回的类型.)         //clearForm: true        // 成功提交后,清除所有的表单元素的值.        resetForm: true        // 成功提交后,重置所有的表单元素的值.        //由于某种原因,提交陷入无限等待之中,timeout参数就是用来限制请求的时间,        //当请求大于3秒后,跳出请求.         //timeout:   3000     };      //'ajaxForm' 方式的表单 .    $('#myForm').ajaxForm(options);      //或者 'ajaxSubmit' 方式的提交.    //$('#myForm').submit(function() {     //    $(this).ajaxSubmit(options);     //    return false; //来阻止浏览器提交.    //}); }); // 提交前function showRequest(formData, jqForm, options) {     // formdata是数组对象,在这里,我们使用$.param()方法把他转化为字符串.    var queryString = $.param(formData); //组装数据,插件会自动提交数据    alert(queryString); //类似 : name=1&add=2      return true; } // 提交后function showResponse(responseText, statusText , xhr , $form)  {    alert('状态: ' + statusText + '\n 返回的内容是: \n' + responseText); }

表单提交之前进行验证:  beforeSubmit会在表单提交前被调用,如果beforeSubmit返回false,则会阻止表单提交

3. 处理服务器返回类型

下面是是个完整示范,分别解析从服务器返回html/json/xml数据。

前台demo8.html:

Demo 8 : form插件的使用--dataType的其他方式.

json方式返回

名称:
地址:
自我介绍:

xml方式返回

名称:
地址:
自我介绍:

html方式返回

名称:
地址:
自我介绍:

后台对应的三个JSP页面代码:

json.jsp

<%@ page contentType="text/html; charset=UTF-8"%><%    String name = request.getParameter("name");    String address = request.getParameter("address");    String comment = request.getParameter("comment");        System.out.println("后台json.jsp收到:" + name);        out.println("{ \"name\" : \""+name+"\" , \"address\" : \""+address+"\", \"comment\" : \""+comment+"\"}");%>

xml.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%  // XML 格式返回数据,需要注意不要留有换行符等(最上面)    String name = request.getParameter("xmlname");    String address = request.getParameter("xmladdress");    String comment = request.getParameter("xmlcomment");    System.out.println("后台xml.jsp收到:" + name);        response.setContentType("text/xml");    out.println("
"); out.println("
"); out.println("
"+name+"
"); out.println("
"+address+"
"); out.println("
"+comment+"
"); out.println("
");%>

html.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%  // XML 格式返回数据,需要注意不要留有换行符等(最上面)    String name = request.getParameter("htmlname");    String address = request.getParameter("htmladdress");    String comment = request.getParameter("htmlcomment");        System.out.println("后台html.jsp收到:" + name);        response.setContentType("text/html; charset=utf-8");    out.println("
" + name + "," + address + "," + comment + "
");%>

 

转载地址:http://wfjbo.baihongyu.com/

你可能感兴趣的文章
HDFS的基本的架构
查看>>
gradlew 和 gradle命令的区别
查看>>
原生js的常用方法整理
查看>>
Java开发想尝试大数据和数据挖掘,如何规划学习?
查看>>
iOS-Charts看这个就够了
查看>>
ES6解析赋值的应用
查看>>
用Js实现红黑树
查看>>
前端进阶必须懂得TCP/IP知识
查看>>
Vue @user 组件
查看>>
分析一下点评网的反爬
查看>>
(五)编辑时间曲线
查看>>
将protocol(代理)的方法声明为mutating
查看>>
页面渲染:过程分析
查看>>
踩坑:基于 fetch 与 Node.js 的 cookies 持久化
查看>>
关于异步AJAX请求执行速度过快问题
查看>>
ijkplayer 的编译、打包 framework 和 https 支持
查看>>
B站、微博们齐点Vlog这把火:风口难造
查看>>
Spring Cloud云服务架构 - HongHu云架构common-service代码结构分析
查看>>
java基础学习:JavaWeb之request和response
查看>>
iOS之AVAudioPlayer
查看>>