從零開始學 Web 之 Ajax（六）jQuery中的Ajax
阿新 • • 發佈：2018-07-20
var 技術分享 else parse cnblogs 我會 clas alt jquer
大家好，這裏是「 從零開始學 Web 系列教程 」，並在下列地址同步更新......
- github：https://github.com/Daotin/Web
- 微信公眾號：Web前端之巔
- 博客園：http://www.cnblogs.com/lvonve/
- CSDN：https://blog.csdn.net/lvonve/
在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。現在就讓我們一起進入 Web 前端學習的冒險之旅吧！
一、jQuery中的Ajax
前面我們寫了這麽多 Ajax 的代碼，其實都是基於 js 的原生代碼，在 jQuery 的內部，對 Ajax 已經進行了封裝，它提供了很多方法可以供開發者進行調用。不過這些封裝都是基於一個方法的基礎上進行的修改，這個方法就是$.ajax()
我們主要學習3個方法：
- $.ajax();
- $.get();
- $.post();
1、$.ajax()
$.ajax() 和 自己的 myAjax2() 使用起來非常的相似，基本上原理一致。同樣是傳入一個對象，有些參數不傳遞的話也有默認值。
// 其他代碼省略 userObj.blur(function () { $.ajax({ url: "./server/checkUsername.php", type: "get", data: {uname: this.value}, success: function (result) { if(result == "ok") { userSpanObj.text("用戶名可用"); } else if(result == "error") { userSpanObj.text("用戶名不可用"); } } }); });
2、$.get() 和 $.post
只需要傳兩個參數，第一個參數是url（帶param的，裏面有參數和值），第二個參數是回調函數。
// $.get()
$.get(url + "?" + params, function (result) {});
// $.post()
$.post(url, {參數: 值}, function(result) {});示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="dv"> <h1>用戶註冊</h1> 用戶名：<input type="text" name="username"><span id="user-span"></span><br> 郵箱：<input type="text" name="email"><span id="email-span"></span><br> 手機：<input type="text" name="phone"><span id="phone-span"></span><br> </div> <script src="jquery-1.12.4.min.js"></script> <script> // 獲取所有元素 var userObj = $("input[name='username']"); var emailObj = $("input[name='email']"); var phoneObj = $("input[name='phone']"); var userSpanObj = $("#user-span"); var emailSpanObj = $("#email-span"); var phoneSpanObj = $("#phone-span"); //用戶名文本框失去焦點事件 userObj.blur(function () { $.get("./server/checkUsername.php?uname=" + $(this).val(), function (result) { if (result == "ok") { userSpanObj.text("用戶名可用"); } else if (result == "error") { userSpanObj.text("用戶名不可用"); } }); }); //郵箱文本框失去焦點事件 emailObj.blur(function () { $.post("./server/checkEmail.php", {e: $(this).val()}, function (result) { if (result == 0) { emailSpanObj.text("郵箱可用"); } else if (result == 1) { emailSpanObj.text("郵箱不可用"); } }); }); //手機號文本框失去焦點事件 phoneObj.blur(function () { $.post("./server/checkPhone.php", {phonenumber: $(this).val()}, function (result) { result = JSON.parse(result); if (result.status == 0) { phoneSpanObj.text(result.message.tips + " " + result.message.phonefrom); } else if (result.status == 1) { phoneSpanObj.text(result.message); } }); }); </script> </body> </html>
從零開始學 Web 之 Ajax（六）jQuery中的Ajax