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 使用者名稱和金鑰附加到正確的環境變數。