Jquery提交表单 Form.js官方插件介绍

我来为你详细讲解“Jquery提交表单 Form.js官方插件介绍”的完整攻略。

1. Form.js官方介绍

Form.js是一个基于jQuery的表单提交插件，具有以下几个特点：

• 简单易用：通过一些基本的配置就可以方便地实现表单提交功能。
• 可扩展性：可通过自定义配置和事件来扩展表单提交功能。
• 可靠性：内置表单验证和错误提示功能，可以在客户端验证表单数据的有效性。

2. Form.js使用步骤

步骤1. 引入依赖

下载Form.js，将文件拷贝到项目文件夹中，并在html文件中引入Form.js和jQuery：

<script src="js/jquery.min.js"></script>
<script src="js/form.js"></script>

步骤2. HTML表单

在HTML文件中，添加表单元素，包括文本输入框、密码输入框、复选框等。例如：

<form id="myform">
    <label>姓名：<input type="text" name="name"/></label>
    <label>密码：<input type="password" name="password"/></label>
    <label>性别：<input type="radio" name="sex" value="male"/>男
              <input type="radio" name="sex" value="female"/>女</label>
    <label>爱好：<input type="checkbox" name="hobby" value="reading"/>阅读
              <input type="checkbox" name="hobby" value="travel"/>旅行
              <input type="checkbox" name="hobby" value="sport"/>运动</label>
    <label>备注：<textarea name="remark"></textarea></label>
    <input type="button" id="submitBtn" value="提交"/>
</form>

在form元素中，每个input、textarea等元素都要有name属性，并且checkbox和radio使用相同的name。

步骤3. 配置Form.js

在JavaScript中，使用jQuery选择器选定form元素，通过调用form()方法来配置Form.js：

$("#myform").form({
    url: "submit.php",             // 提交表单的Url地址
    method: "post",                // 提交表单的方法GET/POST
    dataType: "json",              // 返回数据类型
    success: function(data){       //提交成功回调函数
        alert(data.msg);
    },
    error: function(status){       //提交失败回调函数
        alert("提交失败：" + status);
    }
});

步骤4. 提交表单

配置完成后，当点击提交按钮时，Form.js将按照配置信息自动提交表单。

示例1：提交表单到服务器，服务器返回JSON数据

假设服务器地址为：http://example.com/submit.php，将表单数据以POST方式提交到服务器，并返回JSON数据。

$("#myform").form({
    url: "http://example.com/submit.php",
    method: "post",
    dataType: "json",
    success: function(data){
        if (data.code == 0){
            alert("提交成功！");
        } else {
            alert("提交失败：" + data.msg);
        }
    },
    error: function(status){
        alert("提交失败：" + status);
    }
});

示例2：提交表单到本地，使用Promise处理结果

本地测试代码示例，将表单数据以POST方式提交到服务器，利用Promise处理服务器返回结果。

$("#myform").form({
    url: "/submit.php",
    method: "post",
    dataType: "json"
}).submit().then(function(data){
    if (data.code == 0){
        alert("提交成功！");
    } else {
        alert("提交失败：" + data.msg);
    }
}).catch(function(status){
    alert("提交失败：" + status);
});

在这个示例中，Form.js返回一个Promise对象，可以使用then()方法和catch()方法来处理服务器返回的结果。

结语

以上就是关于“Jquery提交表单 Form.js官方插件介绍”的完整攻略。掌握了Form.js的使用方法，可以帮助我们更加方便地实现表单提交功能。