在進行網頁開發時,表單是常見的元素之一。而使用jQuery讓表單完成跳轉操作是很方便的。下面就來介紹一下具體的方法。
首先,我們需要在表單中加入一個提交按鈕,并為其添加點擊事件。代碼如下:
<form> <input type="text" id="name" name="name" /> <input type="email" id="email" name="email" /> <button id="submit-btn">提交</button> </form> <script> $(document).ready(function(){ $('#submit-btn').click(function(){ // 代碼部分將在下面給出 }); }); </script>
在點擊提交按鈕后,表單會自動向服務器發送請求。我們需要防止默認的表單提交行為。代碼如下:
$('#submit-btn').click(function(event){ event.preventDefault(); // 接下來的代碼將在這里編寫 });
在添加防止默認的表單提交行為后,我們需要獲取表單中的數據,并將它們轉換為對象的形式。代碼如下:
let formData = { 'name': $('#name').val(), 'email': $('#email').val() };
設定表單提交的URL地址即可完成表單跳轉。代碼如下:
$.ajax({ url: 'http://www.example.com/submit-form', type: 'POST', data: formData, success: function(){ window.location.; } });
當表單成功提交后,我們將跳轉至成功頁面。以上就是使用jQuery實現表單跳轉的方法。