jQuery學(xué)習(xí)筆記之 Ajax操作篇(二) - 數(shù)據(jù)傳遞
請求數(shù)據(jù)
我們可以使用 GET、POST 兩種方式向后端請求數(shù)據(jù),這里以 PHP 為例,假設(shè)有測試頁面 age.php,用于返回年齡信息,內(nèi)容為:
if(isset($_REQUEST['name']) && $_REQUEST['name'] == 'stephen') { echo '23'; }
當(dāng)前頁面內(nèi)容為:
<div> <a href="age.php">stephen</a> <span>age : </span> <span id="sex"></span> </div>
我們希望點擊 a 標(biāo)簽后,在不刷新頁面的前提下獲取年齡信息。首先用 GET 方式請求數(shù)據(jù):
GET 方式
$('a').click(function(e) { e.preventDefault();// var url = $(this).attr('href'), name = $(this).text(), requestData = {'name': name}; $.get(url, requestData, function(data) { $('#sex').html(data); }); });
點擊 a 標(biāo)簽后,當(dāng)前頁面為:
數(shù)據(jù)請求成功。我們再用 POST 方式測試下:
POST 方式
$('a').click(function(e) { e.preventDefault();// var url = $(this).attr('href'), name = $(this).text(), requestData = {'name': name}; $.post(url, requestData, function(data) { $('#sex').html(data); }); });
代碼幾乎一樣,只是由 get 方法變?yōu)榱?post 方法。
這里我們其實還可以用 load 方法簡化代碼:
$('a').click(function(e) { e.preventDefault(); var url = $(this).attr('href'), name = $(this).text(), requestData = {'name': name}; $('#sex').load(url, requestData); });
發(fā)送數(shù)據(jù)
除了可以使用 Ajax 技術(shù)從后端獲取數(shù)據(jù),還可以向后端發(fā)送數(shù)據(jù),常見的就是異步提交表單的情景,這里以用戶驗證為例:
<form action="validate.php"> username:<input id="username" name="username" type="text" /> password:<input id="password" name="password" type="text" /> <input value="submit" type="submit" /> </form>
假設(shè)當(dāng)用戶名為 stephenlee,密碼為 123456 時驗證通過,否則失敗,測試頁面 validate.php 為:
if($_REQUEST['username'] == 'stephenlee' && $_REQUEST['password'] == '123456') { echo 'pass'; } else { echo 'fail'; }
使用 get 方式發(fā)送數(shù)據(jù)到后端驗證:
$('form').submit(function(e) { e.preventDefault();// var url = $(this).attr('action'), username = $('input[name="username"]').val(), password = $('input[name="password"]').val(), requestData = {'username': username, 'password': password}; $.get(url, requestData, function(result) { alert(result); }); });
輸入錯誤用戶名 lucas 后,結(jié)果為:
輸入正確用戶名 stephenlee 后,結(jié)果為:
使用 post 方式發(fā)送數(shù)據(jù)思路相同,就不再贅述了。
相關(guān)文章
jQuery中closest和parents的區(qū)別分析
本文給大家介紹jquery中parents()和closest()用法與區(qū)別介紹,在jquery中parents()查找父級元素刪除的時候,發(fā)現(xiàn)它不包含根元素,于是用了closest(),效果不錯,下面我來給大家具體的介紹一下2015-05-05結(jié)構(gòu)/表現(xiàn)/行為完全分離的選項卡(jquery版和原生JS版)
日常項目中常用到的,用jQuery和原生JS分別寫了一個. 兩種寫法均實現(xiàn)了結(jié)構(gòu)/表現(xiàn)/行為的完全分離.當(dāng)然,稍作修改,可以在同一個頁面中應(yīng)用于多個選項卡.2010-08-08jQuery設(shè)置指定網(wǎng)頁元素寬度和高度的方法
這篇文章主要介紹了jQuery設(shè)置指定網(wǎng)頁元素寬度和高度的方法,涉及jQuery操作width及height方法的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03jQuery:節(jié)點(插入,復(fù)制,替換,刪除)操作
jQuery:節(jié)點(插入,復(fù)制,替換,刪除)操作,需要的朋友可以參考一下2013-03-03