今天介紹一下使用jQuery表單submit的一個案例,該案例是一個搜索功能。首先,我們需要在HTML文件中創建一個表單:
<form id="search-form"> <input type="text" id="input-search" placeholder="請輸入搜索關鍵字"> <button type="submit" id="btn-search">搜索</button> </form>
接下來,我們需要編寫jQuery代碼,當用戶點擊搜索按鈕時,表單提交到服務器,服務器返回結果并顯示在頁面中:
$(document).ready(function() { $('#search-form').submit(function(e) { e.preventDefault(); // 阻止表單默認提交事件 var keyword = $('#input-search').val(); // 獲取用戶輸入的關鍵字 var url = 'search.php?keyword=' + keyword; // 拼接API地址 $.get(url, function(data) { // 發送API請求 // 在頁面中顯示搜索結果 $('#search-result').html(data); }); }); });
在上面的代碼中,$('#search-form')
表示我們選擇了表單元素,并將其提交事件綁定到一個函數中。當用戶點擊搜索按鈕時,表單提交事件會被觸發,并執行這個函數,其中通過e.preventDefault()
阻止表單的默認提交行為,避免頁面刷新,$('#input-search').val()
獲取用戶輸入的關鍵字,拼接API地址并發送API請求,最后將返回的結果顯示在<div id="search-result"></div>
中。
在以上代碼中,我們使用了jQuery的$.get()
方法來發送GET請求,并通過回調函數處理返回數據。與$.get()
類似的還有$.post()
和$.ajax()
等方法,它們可以將數據發送到服務器并接收返回結果,可以靈活地處理各種情況。
這就是使用jQuery表單submit實現搜索功能的例子!希望對大家有所幫助。
上一篇jquery補n個零