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