你們好,這裏是「 從零開始學 Web 系列教程 」,並在下列地址同步更新......php
- github:https://github.com/Daotin/Web
- 微信公衆號:Web前端之巔
- 博客園:http://www.cnblogs.com/lvonve/
- CSDN:https://blog.csdn.net/lvonve/
在這裏我會從 Web 前端零基礎開始,一步步學習 Web 相關的知識點,期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧!html
前面咱們寫了這麼多 Ajax 的代碼,其實都是基於 js 的原生代碼,在 jQuery 的內部,對 Ajax 已經進行了封裝,它提供了不少方法能夠供開發者進行調用。不過這些封裝都是基於一個方法的基礎上進行的修改,這個方法就是$.ajax()
。前端
咱們主要學習3個方法:jquery
$.ajax() 和 本身的 myAjax2() 使用起來很是的類似,基本上原理一致。一樣是傳入一個對象,有些參數不傳遞的話也有默認值。git
// 其餘代碼省略 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("用戶名不可用"); } } }); });
只須要傳兩個參數,第一個參數是url(帶param的,裏面有參數和值),第二個參數是回調函數。github
// $.get() $.get(url + "?" + params, function (result) {}); // $.post() $.post(url, {參數: 值}, function(result) {});
示例:ajax
<!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>