柚子快報(bào)邀請(qǐng)碼778899分享：Ajax學(xué)習(xí)筆記第三天

http://yzkb.51969.com/

做決定之前仔細(xì)考慮，一旦作了決定就要勇往直前、堅(jiān)持到底！

【1 ikunGG郵箱注冊(cè)】

整個(gè)流程展示：

1.文件目錄

2.頁(yè)面效果展示及代碼

mysql數(shù)據(jù)庫(kù)中的初始表

2.1 主頁(yè) 09.html:里面代碼部分解釋

display: inline-block;

讓塊元素h1變成行內(nèi)塊元素，不然塊級(jí)元素h1的寬度會(huì)撐滿(mǎn)父元素寬度

box-sizing: border-box;

盒子的大?。汉凶哟笮」潭ǎcmargin,padding,border無(wú)關(guān)，但會(huì)自動(dòng)調(diào)節(jié)content的大小

position: absolute;

絕對(duì)定位會(huì)使元素脫離文檔流 ，絕對(duì)定位元素 是根據(jù) 離其(自身)最近并且**有定位設(shè)置(static定位除外)的父元素** 作為 定位位置的參考起點(diǎn)

cursor:text

大寫(xiě)I的點(diǎn)擊填寫(xiě)

z-index: 999;

參數(shù)越大，表示越會(huì)顯示在其他堆疊元素之上。Z-index 僅能在定位元素上有效（例如 position:absolute;）

display: none;

該元素不顯示 ,相當(dāng)于html標(biāo)簽里面沒(méi)有這個(gè)元素盒子了

letter-spacing:

屬性增加或減少字符之間的空白(字符間距）

如果label標(biāo)簽設(shè)置了for=“xxx”，input標(biāo)簽設(shè)置了id=“xxx”【xxx一樣】，那么，label標(biāo)簽簡(jiǎn)單理解為可以綁定表單元素。label本身與某個(gè)表單綁定，當(dāng)用戶(hù)點(diǎn)擊了label標(biāo)簽則會(huì)觸發(fā)表單，也就相當(dāng)于點(diǎn)擊了表單。

郵箱地址

previousSibling

返回當(dāng)前元素上一個(gè)兄弟元素節(jié)點(diǎn)【請(qǐng)點(diǎn)擊此處】

下面代碼打印i時(shí)，全部都是3，最后一個(gè)。？？？為什么會(huì)出現(xiàn)這樣的情況？？？

console.log(window);

for (var i = 0; i < inputs.length; i++) {

// 聚焦時(shí)

inputs[i].onfocus = function ()

{

// 當(dāng)聚焦的時(shí)候讓label消失

console.log(i);//全部是3

console.log(this); // this => 觸發(fā)聚焦這個(gè)事件的input元素

}

}

解答：

原因就是：js事件處理器在線(xiàn)程空閑時(shí)間不會(huì)運(yùn)行，導(dǎo)致最后運(yùn)行的時(shí)候輸出的都是i最后的值。在每個(gè)點(diǎn)擊事件函數(shù)的作用域鏈中都保存著windows的活動(dòng)對(duì)象**（for語(yǔ)句不構(gòu)成作用域），所以它們引用的是同一個(gè)變量i，即i屬于一個(gè)全局變量**，所以在給每個(gè)li綁定事件后，每個(gè)函數(shù)內(nèi)部i的值都是3。

【意思就是說(shuō)：外面的for循環(huán)已經(jīng)執(zhí)行完了，i已經(jīng)是3了，再等你點(diǎn)擊綁定的事件時(shí)，打印的i可不就是3了嗎？】

通俗點(diǎn)來(lái)說(shuō)就是：先給每個(gè)li綁定點(diǎn)擊事件，綁定完點(diǎn)擊事件后，每次沒(méi)有被執(zhí)行罷了。執(zhí)行的時(shí)候已經(jīng)被賦值成3了，（同步執(zhí)行，異步執(zhí)行問(wèn)題）i是一個(gè)全局變量，所以再點(diǎn)擊某個(gè)li輸出i的時(shí)候，輸出的自然是3了。 解決問(wèn)題：使用ES6中Let完美解決。var i = 0 —> let i = 0

我們不點(diǎn)擊input框，直接我們打印一下window對(duì)象身上有沒(méi)有i。

2.2 add.php

// 從客戶(hù)端傳遞過(guò)來(lái)的數(shù)據(jù)，

// 得到郵箱地址，密碼和手機(jī)號(hào)，并存在變量中

$username= $_POST["username"];

$phone= $_POST["phone"];

$password= $_POST["password"];

// 鏈接數(shù)據(jù)庫(kù)

$connect = mysql_connect("localhost",'root','xjf123456');

// 選擇數(shù)據(jù)庫(kù)

mysql_select_db("ikungg");

// 設(shè)置字符集

mysql_query("SET NAMES UTF8");

// 插入SQL

$sql = "INSERT INTO email_form (username,password,phone) VALUES ('{$username}','{$password}','{$phone}')";

// 執(zhí)行SQL，存進(jìn)數(shù)據(jù)庫(kù)了

$result = mysql_query($sql);

// 如果$result返回1了，就說(shuō)明提交成功了，服務(wù)器操作數(shù)據(jù)庫(kù)，并返回?cái)?shù)據(jù) SUCCESS 或者 ERROR

if($result == 1) {

echo "SUCCESS";

} else {

echo "ERROR";

}

?>

2.3 check.php

// 得到郵箱地址

$username= $_GET["username"];

// 鏈接數(shù)據(jù)庫(kù)

$connect = mysql_connect("localhost",'root','xjf123456');

// 選擇數(shù)據(jù)庫(kù)

mysql_select_db("ikungg");

// 設(shè)置字符集

mysql_query("SET NAMES UTF8");

// 查詢(xún)SQL

$sql = "SELECT * FROM email_form WHERE username = '{$username}'";

// 執(zhí)行SQL

$result = mysql_query($sql);

// 返回查詢(xún)出來(lái)的結(jié)果數(shù)量 ,符合條件的數(shù)據(jù)有多少行

$num = mysql_num_rows($result);

// 當(dāng)前的結(jié)果如果大于0就說(shuō)明有查詢(xún)結(jié)果

if($num > 0) {

echo "ERROR";

} else {

echo "SUCCESS";

}

?>

2.4 ajax.js

(function(){

// 唯一暴露的參數(shù)變量

// 把a(bǔ)jax空對(duì)象放到Windows上

window.ajax = ajax = {};

function common(xhr,JSON,callback) {

// 如果用戶(hù)只傳了兩個(gè)參數(shù)，第二個(gè)參數(shù)如果不是JSON就是函數(shù)

// 如果第二個(gè)參數(shù)的類(lèi)型是函數(shù)了，說(shuō)明第二個(gè)參數(shù)就是回調(diào)函數(shù)

if(typeof JSON == "function") {

// 如果第二個(gè)參數(shù)是回調(diào)函數(shù)了，讓callback參數(shù)就等于這個(gè)函數(shù)

callback = JSON;

JSON = {};

}

xhr.onreadystatechange = function() {

if(xhr.readyState == 4) {

if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {

callback(xhr.responseText)

}

}

}

// 拼接JSON數(shù)據(jù)，比如我們的參數(shù){"id":10001,"name":"小明","age":18}

// 轉(zhuǎn)換為id=10001&name=小明&age=18

var temp = [];

for(var k in JSON) {

temp.push(k+"="+encodeURI(JSON[k]));

}

// 將temp的數(shù)據(jù)轉(zhuǎn)換為字符串格式的，共最后提交請(qǐng)求使用

return temp.join("&");

}

ajax.get = function(url,JSON,callback) {

var xhr = new XMLHttpRequest();

// 調(diào)用公共方法

var str = common(xhr,JSON,callback)

// 防止沒(méi)有參數(shù)

if(str) {

url+="?"+str

}

xhr.open("get",url,true);

xhr.send(null);

}

ajax.post = function(url,JSON,callback) {

var xhr = new XMLHttpRequest();

// 調(diào)用公共方法

var str = common(xhr,JSON,callback)

xhr.open("post",url,true);

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

xhr.send(str)

}

})()

柚子快報(bào)邀請(qǐng)碼778899分享：Ajax學(xué)習(xí)筆記第三天

http://yzkb.51969.com/

精彩文章