jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)

jQuery.Form.js用法实例分析

什么是jQuery.Form.js？

jQuery.Form.js是一个用来处理HTML表单的JavaScript库，它特别适用于处理表单的序列化和提交。它可以很方便地将表单元素的值序列化成JSON格式的数据，并且可以直接使用Ajax技术将表单的数据提交到服务端。

jQuery.Form.js的使用方法

引入jQuery.Form.js

在应用这个库之前，需要先引入jQuery和jQuery.Form.js。可以将它们保存在本地服务器或直接引入它们的CDN链接。

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="https://cdn.staticfile.org/jquery.form/4.3.0/jquery.form.min.js"></script>

表单序列化

表单序列化就是取得表单元素的值，并将它们转换成键值对的形式，可以通过调用jQuery.Form.js提供的serialize()方法来实现。

下面是一个示例表单：

<form id="my-form">
  <input type="text" name="username" value="lily" />
  <input type="password" name="password" value="123456" />
  <input type="checkbox" name="rememberMe" checked />
  <textarea name="description">description</textarea>
  <select name="city">
    <option value="0">New York</option>
    <option value="1">Washington D.C.</option>
  </select>
</form>

调用serialize()方法序列化这个表单：

const formData = $('#my-form').serialize();
console.log(formData);

输出结果如下：

"username=lily&password=123456&rememberMe=on&description=description&city=0"

可以看到，serialize()方法按照表单元素的顺序生成了一个URL格式的字符串，每个键值对之间用&符号连接。

表单提交

通过使用jQuery.Form.js，可以将表单的数据通过Ajax技术提交到服务端。使用ajaxSubmit()方法可以提交表单数据。

以下代码展示了如何将表单以POST方式提交到服务器。

$('#my-form').ajaxSubmit({
  type: 'post',
  url: '/submit',
  data: { key: 'value' },
  dataType: 'json',
  success: function(data, status, xhr) {
    console.log(data, status, xhr);
  },
  error: function(xhr, status, error) {
    console.log(status, error);
  }
});

示例说明

示例一：文件上传

使用jquery.form结合FormData完成文件上传。

以下是HTML代码：

<h1>上传文件</h1>
<form id="upload-form" enctype="multipart/form-data">
  <input type="file" name="file" />
  <br />
  <button type="submit">提交</button>
</form>

以下是JavaScript代码：

$('#upload-form').submit(function(event) {
  event.preventDefault();
  const form = $(this);
  const formData = new FormData(this);
  formData.append('extra-key', 'extra-value')
  $.ajax({
    url: 'upload/',
    type: 'POST',
    data: formData,
    cache: false,
    dataType: 'json',
    processData: false,
    contentType: false,
    success: function(data) {
      console.log('上传成功', data);
    },
    error: function(xhr, status, error) {
      console.log('上传失败', error);
    }
  });
});

示例二：登录表单

以下是HTML代码：

<h1>登录</h1>
<form id="login-form">
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" />
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" />
  </div>
  <button type="submit">登录</button>
</form>

以下是JavaScript代码：

$('#login-form').submit(function(event) {
  event.preventDefault();
  const form = $(this);
  const formData = form.serialize();
  $.ajax({
    url: 'login/',
    type: 'POST',
    data: formData,
    dataType: 'json',
    success: function(data) {
      console.log('登录成功', data);
    },
    error: function(xhr, status, error) {
      console.log('登录失败', error);
    }
  });
});

总结

通过这篇文章，我们学习了如何使用jQuery.Form.js这个库来处理HTML表单。我们了解了表单序列化和表单的提交，并在两个示例中使用jQuery.Form.js来实现文件上传和登录表单的AJAX提交。