8.17久違的筆記......Ajax

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ù)庫連接

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末拨脉,一起剝皮案震驚了整個(gè)濱河市哆姻,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌玫膀,老刑警劉巖矛缨,帶你破解...
    沈念sama閱讀 219,539評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異帖旨,居然都是意外死亡箕昭,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,594評(píng)論 3 396
  • 文/潘曉璐 我一進(jìn)店門解阅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來落竹,“玉大人,你說我怎么就攤上這事货抄∈稣伲” “怎么了朱转?”我有些...
    開封第一講書人閱讀 165,871評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長积暖。 經(jīng)常有香客問我藤为,道長,這世上最難降的妖魔是什么夺刑? 我笑而不...
    開封第一講書人閱讀 58,963評(píng)論 1 295
  • 正文 為了忘掉前任缅疟,我火速辦了婚禮,結(jié)果婚禮上性誉,老公的妹妹穿的比我還像新娘窿吩。我一直安慰自己,他們只是感情好错览,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,984評(píng)論 6 393
  • 文/花漫 我一把揭開白布纫雁。 她就那樣靜靜地躺著,像睡著了一般倾哺。 火紅的嫁衣襯著肌膚如雪轧邪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,763評(píng)論 1 307
  • 那天羞海,我揣著相機(jī)與錄音忌愚,去河邊找鬼。 笑死却邓,一個(gè)胖子當(dāng)著我的面吹牛硕糊,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播腊徙,決...
    沈念sama閱讀 40,468評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼简十,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了撬腾?” 一聲冷哼從身側(cè)響起螟蝙,我...
    開封第一講書人閱讀 39,357評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎民傻,沒想到半個(gè)月后胰默,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,850評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡漓踢,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,002評(píng)論 3 338
  • 正文 我和宋清朗相戀三年牵署,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片喧半。...
    茶點(diǎn)故事閱讀 40,144評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡碟刺,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出薯酝,到底是詐尸還是另有隱情半沽,我是刑警寧澤爽柒,帶...
    沈念sama閱讀 35,823評(píng)論 5 346
  • 正文 年R本政府宣布,位于F島的核電站者填,受9級(jí)特大地震影響浩村,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜占哟,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,483評(píng)論 3 331
  • 文/蒙蒙 一心墅、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧榨乎,春花似錦怎燥、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,026評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至肛捍,卻和暖如春隐绵,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背拙毫。 一陣腳步聲響...
    開封第一講書人閱讀 33,150評(píng)論 1 272
  • 我被黑心中介騙來泰國打工依许, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人缀蹄。 一個(gè)月前我還...
    沈念sama閱讀 48,415評(píng)論 3 373
  • 正文 我出身青樓峭跳,卻偏偏與公主長得像,于是被迫代替她去往敵國和親缺前。 傳聞我的和親對(duì)象是個(gè)殘疾皇子蛀醉,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,092評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • AJAX 原生js操作ajax 1.創(chuàng)建XMLHttpRequest對(duì)象 var xhr = new XMLHtt...
    碧玉含香閱讀 3,201評(píng)論 0 7
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)诡延,斷路器滞欠,智...
    卡卡羅2017閱讀 134,672評(píng)論 18 139
  • 國家電網(wǎng)公司企業(yè)標(biāo)準(zhǔn)(Q/GDW)- 面向?qū)ο蟮挠秒娦畔?shù)據(jù)交換協(xié)議 - 報(bào)批稿:20170802 前言: 排版 ...
    庭說閱讀 10,993評(píng)論 6 13
  • 突然來了興致古胆,不去管會(huì)不會(huì)是三分鐘的熱情肆良,用手機(jī)就編輯了起來也是夠隨便的,從哪里寫起逸绎,想了想惹恃,14年吧,有一個(gè)點(diǎn)棺牧,...
    初語丶閱讀 200評(píng)論 0 0
  • 引用 http://blog.csdn.net/u010046908/article/details/539271...
    javalong閱讀 3,284評(píng)論 2 7