Ajax
1.兩種數(shù)據(jù)傳輸方式:
get / post
get 請(qǐng)求信息會(huì)在地址欄顯示驹针,跨域一般使用get方法
post 適用于比較隱秘的數(shù)據(jù)
使用方法(下面都是jq封裝的ajax的使用)
$.ajax({
type:"get", //或者post
url:"forajax.php",
async:true,
dataType:“text”, //php訪問對(duì)象文件時(shí)一般用text
success:function(data){ //data固定參數(shù)為請(qǐng)求完成后得到的數(shù)據(jù)
alert(data);
}逢唤,
complete:function(){ //請(qǐng)求完成后進(jìn)行的操作
}蔓挖,
})
獲取自己的數(shù)據(jù)庫數(shù)據(jù)芬迄,或者php后臺(tái)處理過的數(shù)據(jù)這是一個(gè)登錄功能的js部分 . 有php后臺(tái)文件攒庵,所以必須從服務(wù)器的www文件進(jìn)入頁面 校摩。localhost:8080或者直接用ip/xlayzheng/...
$.ajax({
type:"post",
url:"php/login-register.php", //這是數(shù)據(jù)傳向的php文件
data:{
username:usernameVal,
userpwd:userpwdVal,
type:"login"
},
dataType:"text",
success:function(data){
if (data === "success") {
alert(usernameVal+",歡迎芳撒!")
$("#uname").val("");
$("#upwd").val("");
} else{
alert("用戶名或密碼錯(cuò)誤邓深!");
$("#upwd").val("");
}
},
})
--------------------------------------------------php部分---------------------------------------------------------------------
<?php
//獲取數(shù)據(jù)
$_username = $_POST['username']; //什么方法傳輸?shù)臄?shù)據(jù)就是什么方法接受
$_userpwd = $_POST['userpwd'];
$_type = $_POST['type']; //傳輸?shù)膁ata的type屬性,用以判斷執(zhí)行哪條語句
//第一步未桥,定義數(shù)據(jù)庫的信息
define("HOST","127.0.0.1"); //定義主機(jī)名
define("PORT","3306"); //定義端口號(hào)默認(rèn)3306
define("DB_NAME","root"); //定義數(shù)據(jù)名用戶名
define("DB_PWD","123456"); //定義用戶名SQL數(shù)據(jù)庫的密碼
define("DB_CON","jenashop");//定義自己要操作的的數(shù)據(jù)庫名
//-------------------------------------------------------------------第二步,創(chuàng)建數(shù)據(jù)庫連接
$_link = new mysqli(HOST,DB_NAME,DB_PWD,DB_CON,PORT);
//------------------------------------------------------------------ 設(shè)置字符編碼
$_link->set_charset("utf8");
if($_type==="login"){
//-----------------------------------------------------------第三步芥备,創(chuàng)建一條數(shù)據(jù)庫語句
$_sql = 'SELECT userpwd from userinfo WHERE username="'.$_username.'"';
//-----------------------------------------------------------執(zhí)行查詢語句
$_res = $_link->query($_sql);
//----------------------------------------------------------遍歷結(jié)果集合冬耿,即使只有一行也要這一步
$_row = $_res->fetch_row();
//----------------------------------------------------------判斷密碼是否正確
if($_row[0] == $_userpwd){
echo "success";
}else {
echo "error";
}
//-----------------------------------------------------------釋放數(shù)據(jù)
$_res->free();
}else{
//--------------------------------------------------------- 創(chuàng)建語句
$_sqlinsert = 'INSERT into userinfo(username,userpwd) value ("'.$_username.'","'.$_userpwd.'")';
//----------------------------------------------------------執(zhí)行語句
$_resinsert = $_link->query($_sqlinsert);
//------------------------------------------------------------檢查是否執(zhí)行成功,注意后面是affected_rows
$_r = $_link->affected_rows;
echo $_r;
}
//------------------------------------------------------------------關(guān)閉數(shù)據(jù)庫連接
$_link->close();
?>
Ajax跨域獲取數(shù)據(jù)的例子 獲取到可以請(qǐng)求的地址后萌壳,利用Ajax亦镶,十分方便取到網(wǎng)站的數(shù)據(jù)
<script type="text/javascript">
$(function(){
//輸入框內(nèi),每次鼠標(biāo)彈起時(shí)袱瓮,進(jìn)行搜索缤骨,并返回聯(lián)想商品,與數(shù)量
$('.txt').on('keyup',function(){
$.ajax({
type:"get", //跨域請(qǐng)求一般用get方式
//天貓的數(shù)據(jù)地址
url:"https://suggest.taobao.com/sug?code=utf-8&q="+$('.txt').val()+"&_ksTS=1502958378801_4787&callback=jsonp4788&area=b2c&code=utf-8&k=1&bucketid=9&src=tmall_pc&isg=AsnJLVFs9O3EkIh2LbbvIw402PXjvr2QxO1ir2s-RbDvsunEtGbNGLfkgCD_",
//淘寶的數(shù)據(jù)地址
//url:"https://suggest.taobao.com/sug?code=utf-8&q=手機(jī)&_ksTS=1502958214110_1909&callback=jsonp1910&k=1&area=c2c&bucketid=1",
dataType:"jsonp",
jsonp:"callback", //百度的為cb,可以在網(wǎng)頁數(shù)據(jù)傳輸時(shí)在地址欄確定不同網(wǎng)站的jsonp值
async:true,
success:function(data){
var res = data.result;
$(".result").html("");
for(var i = 0 ; i<res.length; i++){
$(".result").append($("<li><a target='_blank'>"+res[i][0]+"</a><span>約"+res[i][1]+"件相關(guān)商品>><span></li>"));
}
}
})
})
//商品搜索鏈接:
//https://list.tmall.com/search_product.htm?q=%E7%94%B5%E8%84%91&type=p&vmarket=&spm=875.7931836%2FB.a2227oh.d100&from=mallfp..pc_1_searchbutton
//點(diǎn)擊下面的聯(lián)想商品進(jìn)入相應(yīng)頁面
$(".result").on("click","li",function(e){
event.stopPropagation();
$(this).children().attr('href',"https://list.tmall.com/search_product.htm?q="+$(this).children().first().html()+"&type=p&vmarket=&spm=875.7931836%2FB.a2227oh.d100&from=mallfp..pc_1_searchbutton");
$(".txt").val( $(this).children().first().html());
$(".result").html("");
})
//點(diǎn)擊搜索尺借,進(jìn)入文本框?qū)?yīng)商品的結(jié)果頁面
$(".search").on("click",function(){
$(".result").html("");
$(this).attr('href',"https://list.tmall.com/search_product.htm?q="+$(".txt").val()+"&type=p&vmarket=&spm=875.7931836%2FB.a2227oh.d100&from=mallfp..pc_1_searchbutton");
})
//點(diǎn)擊文本框以外的地方時(shí)绊起,取消聯(lián)想
$(document).on("click",function(){
$(".result").html("");
$(".txt").val("");
})
})
</script>
-----------------------------------------------------------html部分----------------------------------------------------------------------
<body>
<div class="box">
<input type="text" class="txt" placeholder="請(qǐng)輸入商品名" />
<a target="_blank" class="search">搜 索</a>
<ul class="result"></ul>
</div>
</body>
在php文件的編寫中,基礎(chǔ)的會(huì)用到的流程都在上述例子中燎斩。
1.變量的聲明是用 $ 符虱歪。
2.數(shù)據(jù)的接收方法要與傳輸?shù)姆椒ㄒ恢?br> 3.創(chuàng)建數(shù)據(jù)連接時(shí)。端口號(hào)(本例中是PORT)必須是放再最后的栅表。MySQL默認(rèn)是3306笋鄙。
4.設(shè)置字符編碼也是很重要的,不然可能傳輸后的數(shù)據(jù)改變了編碼格式谨读,以至于后面的處理判斷出現(xiàn)問題。
5.數(shù)據(jù)的釋放有時(shí)會(huì)對(duì)整個(gè)代碼的運(yùn)行產(chǎn)生影響坛吁,這個(gè)看具體情況劳殖。
6.操作完成后記得要關(guān)閉數(shù)據(jù)庫連接。