ajax form

ajax形式

关于提高成绩的药物的 HTML 表格。

注意：Ajax 形式与 Polymer 无关。事实上，它根本没有依赖项，但应该可以与 Polymer 或任何其他自定义元素库一起正常工作。如果您更喜欢使用简单的自定义元素polyfill，ajax-form也是您的最佳选择。

传统的<form>有什么问题？

1. 表单提交会更改/重新加载页面，正确防止这种情况并非易事。

2. 您无法使用提交的表单发送自定义标头。

3. 提交表单后，您无法（轻松）解析服务器响应。

4. 以编程方式跟踪无效的表单/字段是令人沮丧的。

5. 您无法以 JSON 形式发送表单数据。

6. 在将用户输入的数据发送到服务器之前，您没有机会以编程方式对其进行扩充。

7. 自定义表单元素（例如使用 Web 组件规范创建的元素）无法使用传统的纯粹<form>提交。

ajax-form自定义元素增强了传统的<form>以提供附加功能并解决上面列出的问题。请参阅 API 文档页面以获取完整的文档和演示。

安装

npm install ajax-form

使用

使用 ajax-form 就像使用传统表单一样，但必须在<form>元素标记中包含必需的is="ajax-form"属性。由于 ajax-form 是一个 Web 组件，因此您可能需要包含一个 Web 组件 polyfill，例如 webcomponents.js，以确保未实现 WC 规范的浏览器能够使用 ajax-form。 Ajax 形式没有硬依赖性。

ajax-form的一个非常简单的使用看起来就像一个普通的<form> ，添加了一个is属性：

 <form is="ajax-form" action="my/form/handler" method="post"><label>输入您的姓名：<input type="text" name="full_name"></label>.. .</形式>

请参阅 API 文档页面以获取完整的文档和演示。

一体化

您正在开发表单字段 Web 组件吗？ 阅读下面的说明以确保您的字段与 ajax-form 正确集成。

正在提交

如果您的自定义元素公开包含字段当前值的value属性，您的组件将很好地集成到 ajax 表单中。 如果情况并非如此，那么您的自定义字段必须确保本机 HTML 表单字段是 light DOM 的一部分。 无论哪种情况，具有value属性的元素还必须包含name属性。 您的用户/集成商将需要为此字段添加适当的值。

验证

如果您的自定义字段在 light DOM 中公开本机 HTML 表单字段，则无需执行任何其他操作 - ajax-form 将尊重您的用户/集成商添加到该字段的任何验证。 约束属性必须放置在本机 HTML 表单字段上。

如果您的自定义字段默认情况下不会在 light DOM 中公开本机 HTML 表单字段，并且您希望 ajax-form 遵守验证约束，那么您将需要包含一些代码来解决此问题。 以下是要遵循的步骤：

1. 将不透明的 0x0 <input type="text">字段添加到 light DOM，就在您的字段之前。

2. 将customElementRef属性添加到输入，其值等于您的字段。

3. 确保输入的有效性始终与字段的有效性相匹配。 您可以通过HTMLInputElement上的setCustomValidity方法来执行此操作。

有关示例，请参阅<file-input>自定义元素源代码中的setValidationTarget方法。

测试

npm install
npm install -g grunt-cli
grunt

• 运行不带任何参数的grunt将针对一些本地安装的浏览器进行测试（有关详细信息，请参阅代码库）。

• 运行grunt shell:wctSauce将针对 SauceLabs 中的许多浏览器运行测试。 首先确保您将 SauceLabs 用户名和密钥附加到正确的环境变量。