對于一個網(wǎng)站, 注冊、登錄、評論等表單提交都是頻繁進(jìn)行的操作。而傳統(tǒng)的表單提交需要將數(shù)據(jù)通過 POST 或者 GET 方式發(fā)送至后臺,然后等待后臺響應(yīng),最終才能得知提交結(jié)果。這樣有時會影響用戶體驗(yàn),而使用 AJAX 技術(shù),可使提交過程更加及時、流暢。
下面來看一下如何使用 PHP 語言結(jié)合 AJAX 技術(shù)實(shí)現(xiàn)表單提交。
首先,我們需要制作一個注冊表單,代碼如下:
<form id="register-form"> <input type="text" name="username" placeholder="用戶名"> <input type="email" name="email" placeholder="郵箱"> <input type="password" name="password" placeholder="密碼"> <button type="submit" id="submit-btn" name="submit">提交</button> </form>
在這個表單中,我們通過使用 AJAX 技術(shù),通過 jQuery 來實(shí)現(xiàn)無刷新提交表單,并且能夠?qū)崟r得到服務(wù)器響應(yīng)。
接下來,我們可以使用 jQuery 的 $.ajax() 方法來實(shí)現(xiàn) AJAX 請求,并且通過 post 方法來向后端服務(wù)器傳遞表單數(shù)據(jù)。
下面是一個完整的實(shí)例代碼:
$(document).ready(function() { $('#submit-btn').click(function(event) { // 阻止表單默認(rèn)行為 event.preventDefault(); // 獲取表單數(shù)據(jù) var data = $('#register-form').serialize(); // 發(fā)送 AJAX 請求 $.ajax({ method: 'POST', url: 'register.php', data: data, beforeSend: function() { // 發(fā)送請求前的回調(diào)函數(shù),可以進(jìn)行一些前期處理 }, success: function(response) { // 成功后的回調(diào)函數(shù),可以處理服務(wù)器返回的數(shù)據(jù) console.log(response); }, error: function(jqXHR, textStatus, errorThrown) { // 失敗后的回調(diào)函數(shù),可以進(jìn)行異常處理 } }); }); });
在上面的代碼中,我們使用了 jQuery 的 $.ajax() 方法,通過 method 參數(shù)來指定發(fā)送請求的類型,這里使用 POST 方法;通過 url 參數(shù)來指定要向哪個地址請求;通過 data 參數(shù)來傳遞表單數(shù)據(jù)。這里的方式是使用 jQuery 提供的序列化表單數(shù)據(jù)的方式(即使用表單的 name 屬性和 value 組成鍵值對的方式)。
回調(diào)函數(shù) beforeSend、 success 和 error 分別表示在發(fā)送AJAX 事件之前、成功返回響應(yīng)時、失敗時的響應(yīng)事件。
至此,我們就成功實(shí)現(xiàn)了一個簡單的 AJAX 表單提交功能。