Ajax是一種在網(wǎng)頁(yè)中實(shí)現(xiàn)無(wú)需刷新頁(yè)面的異步通信的技術(shù)。而Parsley.js是一個(gè)JavaScript庫(kù)，用于驗(yàn)證表單輸入。當(dāng)這兩者結(jié)合起來(lái)使用時(shí)，可以實(shí)現(xiàn)在表單提交時(shí)進(jìn)行異步驗(yàn)證。Ajax提交Parsley.js允許我們?cè)诓凰⑿抡麄€(gè)頁(yè)面的情況下驗(yàn)證表單輸入，并顯示對(duì)應(yīng)的錯(cuò)誤消息。這種方法提供了用戶友好的體驗(yàn)，避免了重新加載整個(gè)頁(yè)面的麻煩。

考慮以下示例：我們正在開發(fā)一個(gè)用戶注冊(cè)表單，以收集用戶的姓名，電子郵件和密碼。我們想要在用戶填寫表單時(shí)立即進(jìn)行驗(yàn)證，并顯示相應(yīng)的錯(cuò)誤消息。這時(shí)，我們可以使用Ajax提交Parsley.js來(lái)實(shí)現(xiàn)這一目標(biāo)。

<form id="register-form">
<label for="name">姓名</label>
<input type="text" id="name" name="name" required data-parsley-trigger="change" />
<ul class="parsley-errors-list"></ul>
<label for="email">電子郵件</label>
<input type="email" id="email" name="email" required data-parsley-trigger="change" />
<ul class="parsley-errors-list"></ul>
<label for="password">密碼</label>
<input type="password" id="password" name="password" required minlength="8" data-parsley-trigger="change" />
<ul class="parsley-errors-list"></ul>
<button type="submit">注冊(cè)</button>
</form>

在上述示例中，我們使用了Parsley.js來(lái)添加表單驗(yàn)證。"required"屬性表明字段是必填字段，而"data-parsley-trigger"屬性則定義了何時(shí)觸發(fā)驗(yàn)證。當(dāng)字段的值發(fā)生更改時(shí)，驗(yàn)證將立即進(jìn)行。如果驗(yàn)證不通過(guò)，將在相應(yīng)字段下方顯示錯(cuò)誤消息。我們還添加了一個(gè)提交按鈕，用于向服務(wù)器發(fā)送表單數(shù)據(jù)。

為了實(shí)現(xiàn)Ajax提交Parsley.js，我們需要編寫一些JavaScript代碼來(lái)處理表單的異步驗(yàn)證和提交。下面是一個(gè)使用jQuery的示例：

$(document).ready(function() {
$('#register-form').parsley();
$('#register-form').on('submit', function(event) {
event.preventDefault();  // 阻止默認(rèn)表單提交行為
var form = $(this);
var formData = form.serialize();
$.ajax({
url: form.attr('action'),
type: 'POST',
data: formData,
success: function(response) {
// 處理成功的響應(yīng)
},
error: function(xhr, textStatus, errorThrown) {
// 處理錯(cuò)誤的響應(yīng)
}
});
});
});

在上述代碼中，我們首先通過(guò)調(diào)用".parsley()"來(lái)初始化Parsley.js驗(yàn)證。然后，我們添加了一個(gè)"submit"事件處理程序，以便阻止默認(rèn)的表單提交行為。我們使用jQuery的"serialize()"方法來(lái)獲取表單數(shù)據(jù)，并通過(guò)Ajax將其發(fā)送到服務(wù)器。

總結(jié)起來(lái)，Ajax提交Parsley.js可以使我們?cè)诓凰⑿抡麄€(gè)頁(yè)面的情況下進(jìn)行表單驗(yàn)證，并顯示相應(yīng)的錯(cuò)誤消息。這種技術(shù)能夠提供較好的用戶體驗(yàn)，尤其在需要及時(shí)響應(yīng)和更新的情況下。通過(guò)使用示例，我們展示了如何結(jié)合使用Ajax和Parsley.js來(lái)實(shí)現(xiàn)表單驗(yàn)證和異步提交。