u011474028
u011474028

jQuery表单库jquery.form.js

本主题是《云客drupal源码分析》的番外篇，在drupal系统中用于支持AJAX API，由于这是一个独立实用的库，因此专门用一个主题介绍

 

简介：

jQuery表单库（jquery.form.js库）以jQuery为基础，用于处理表单AJAX提交，使得表单AJAX提交简单、容易，且能完整控制提交过程和处理结果，不需要任何特殊标签辅助，不影响原表单结构，只要使用该库就能使普通表单平滑升级为ajax提交表单

官方地址：https://github.com/jquery-form/form

源代码查看和下载地址：https://github.com/jquery-form/form/blob/master/src/jquery.form.js

当前（201907）版本4.22

该版本对jquery的兼容性：

需要jQuery 1.7.2或更高，完全兼容jQuery 2，部分兼容jQuery 3，本篇测试环境为jquery 3.2.1，测试无问题，不兼容jQuery 3 Slim

drupal8.7版本该库版本4.22及jquery 3.2.1

 

使用示例

先看一个使用示例整体感受下其魅力：





    
    jquery表单示例
    
    







    云客：

    标题：

 

在服务器端index.php内容为：

';
print_r($_REQUEST);
echo '
';

 

主要方法介绍：

该库扩展了jquery（在其原型和属性上添加了方法），最常使用的两个方法是（通常二选一）：

$.fn.ajaxSubmit( options, data, dataType, onSuccess )

在表单对应的jquery对象上调用该方法将立即提交表单，参数如下：

options：为选项对象，通过该对象可以完整控制提交过程和结果处理，详见下文

data：为额外传递到服务器的数据，数据对象方式，非字符串方式，详见选项

dataType：为ajax请求期待的数据类型，详见选项

onSuccess：为请求成功时执行的回调

该方法也可仅接收一个回调参数，将被当做请求成功时执行的回调

 

$.fn.ajaxForm( options, data, dataType, onSuccess )

该方法和ajaxSubmit方法类似，参数及含义完全相同，但她不提交表单，而是为表单绑定提交事件，并设置各种AJAX参数，相当于在为表单ajax提交做准备，当表单自然提交时（派发submit事件时，通常是点击提交按钮）将采用AJAX提交，由于该方法准备的AJAX由表单自然提交触发，因此和ajaxSubmit方法相比有以下优势：

1、如果提交是由图片表单元素触发，将包含点击坐标

2、将包含提交元素（通常是提交按钮）的name/value数据

在内部，该方法绑定的ajax提交最终还是由ajaxSubmit方法执行

 

选项参数：

在以上两个方法的选项参数中，全部标准的jquery原生$.ajax选项可用，请查阅：

   https://api.jquery.com/jQuery.ajax/

额外的或需要注意的选项如下：

beforeSerialize

表单序列化之前执行的回调函数，在取回值之前提供一个机会去操纵表单，如果返回false将阻止表单提交，回调接收两个参数：jquery包装的表单对象和选项对象

beforeSubmit

表单提交前执行的回调，如果返回false将阻止表单提交，有三个参数：数组格式的表单数据、jquery包装的表单对象和选项对象

注意：在调用顺序上，还有beforeSend、dataFilter、error 、complete等回调，由于是jquery本身支持的，这里不再列出

filtering

处理字段前调用的回调，她提供了一个机会来过滤元素，会被这样调用：els = $.map(els, filtering);，该回调有两个参数：元素和索引

clearForm

布尔值，当提交成功后，表单是否应该清理

data

随表单一起提交的额外数据，一个数据对象，如：data: { key1: 'value1', key2: 'value2' }

extraData

该参数仅供内部使用，是data序列化成字符串之前复制的一个复本，只用于老旧浏览器AJAX上传文件的情况，也就是表单包含并在老旧浏览器中运行的情况，在老浏览器中文件AJAX上传需要通过