ajax 提交 注冊表單 到MySQL數據庫

 

今天按照要求，要做一個登陸、注冊表單，本來樣式做好就行了，本來咱就是干前端的，但讓咱自己都沒想到的是，不到一個小時竟然都干完了，實在閑的蛋疼，就想到鏈接數據庫玩，遙想當年，畢竟咱也是寫過后台的，哪知，咳咳，真要是寫了，真是一萬個草擬嗎，在心中奔騰。

公司項目是用TP寫的，所以要搞適應tp的方式，搞了半天，發現不會！原來學的，都還給學校里的項目導師光哥啦！

於是G、B、狗，邊查邊學，最后還是被咱趕出了，在此記一下！

 

這是html的注冊表單：

<div class="register-box">
        <div class="login-dialog-header">
            <button class="btn-login-dialog-close" type="button">
                ×
            </button>
            <div class="login-dialog-tt">
                <h2 class="">注冊</h2>
            </div>
        </div>
        <div class="login-dialog-body">
            <form id = 'register-box-form'>
                <div class="login-usr-name">
                    <label for>賬號：</label>
                    <input type="text" name="name" class="inpt-style inpt-login-usr-name" placeholder="郵箱/手機號">
                </div>
                <div class="login-usr-pwd">
                    <label for>密碼：</label>
                    <input type="password" name="pwd" class="inpt-style inpt-login-usr-pwd" placeholder="設置密碼">
                </div>
            </form>
        </div>
        <div class="login-dialog-footer">
            <button type="button" class="btn-style btn-block login-dialog-submit ">注冊</button>
            <div class="go-login">&lt;去登錄</div>
        </div>
    </div>

 

下面是ajax：

function submitClickEvent(){
    $('.register-box .login-dialog-submit').click(function(){

        //數據序列化，但是不知道在PHP哪里怎么接住？？以后解決
        //var formData = $("#register-box-form").serialize();

        var name=$('.register-box .inpt-login-usr-name').val();
        var pwd=$('.register-box .inpt-login-usr-pwd').val();
        //console.log(name,pwd);
        $.ajax({
            type: "POST",
            url: "index/index/insert",
            cache: false,
            data:{
                    name:name,
                    pwd:pwd
            },
            success:function(data){
                alert("注冊成功!");
            },
            error:function(){
                alert('注冊失敗！');
            }
        });


    });
}

 

接着是tp5里面的代碼：

    // 處理表單數據
     public function insert() {//此方法對應js里的 url: "index/index/insert",
        
        $data = [
                'id'=>time(),
               'userName' => $_POST['name'], 
               'pwd' => $_POST['pwd']
               ]; 
     
          //error_log('dd2'.$data, 3, "./my-errors.log");   
        ////echo Db::table('bdn_user_table')->insertAll($data)?'成功！':'失敗！';
        if(Db::table('bdn_user_login_table')->insert($data)){
             $this->ajaxReturn($_POST,'添加信息成功',1);
        }else{
             $this->ajaxReturn(0,'添加失敗',0); 
        }
     }

 

先留着，所不定，咱轉行干后端，能用上！！

<script type="text/JavaScript">

//序列化

                       var data = $('#form_FanXuLie').serialize();

data = decodeURIComponent(data ,true);//調用decodeURIComponent(XXX,true);將數據解碼，解決中文亂碼問題

                       console.log(data)//=> 'name=val&age=val&charId=val'

                        //反序列化 對jquery ajax的serialize()值的反序列化
                        var data = 'name=王碩&age=20歲&beizhu=測試反序列化';                        
                        data.split('&').forEach(function (item) {  //js的forEach()方法
                            item = item.split('=');
                            var name = item[0],
                                val = item[1];
                            $('#form_FanXuLie  [name=' + name + ']').val(val);

                        });

</script>

js和php中數組序列化（serialize和unserialize）
對於url中參數值的傳遞，在數組方面可能顯得無能為力。但在php中，我們可以使用serialize()將數組序列化，
得到一個字符串，這樣就可以很輕易的傳遞了。當得到該字符串后，我們使用unserialize()將這個字符串反序列化，
得到原來的數組。
    然而，我們在js和js或者js和php中怎么傳遞數組呢？因為在js中，沒有這樣（serialize）的函數，
所以我們只有使用自定義的函數將數組轉化為字符串，這樣雖然也能實現，但運行效率卻降低了。
    在ajax中，我們可以使用xml標准數據存儲格式進行數據傳遞，但如果只是傳遞簡單的比如“0”，“1”之類的，
根本用不着xml那樣復雜的格式，那樣反而降低了效率。對於簡單的數組，
我們也不必先按照xml死板的格式封裝數據，而只需要使用函數serialize()將它序列化，
然后通過xmlhttprequest返回給客戶端。在客戶端，因為是js處理，所以不能用php現成的unserialize()函數來將它反序列化，
於是需要引用到兩個js文件：utf.js（編碼轉換）和Phpserializer.js（封裝serialize和unserialize函數）。
這兩個文件網上可以下載到。
    具體用法：
scrīpt src="./utf.js">scrīpt src="./Phpserializer.js">    
在服務器端：$arr是從數據庫查詢的記錄數組。$arr=serialize($arr);
    客戶端：var s=xmlHttpRequest.responseText;
           var a=unserialize(s);
這樣，a這個數組和$arr是完全一樣的。數組傳遞原來也這么簡單。
上面的js引用沒有寫完整,因為新浪的編輯器好像不支持直接寫代碼是的。

 

另附加一些查到的有用信息，部分沒有經過驗證，使用時留心！