ajax 提交注册表单到MySQL数据库

最新推荐文章于 2024-11-01 12:20:35 发布

weixin_30651273

最新推荐文章于 2024-11-01 12:20:35 发布

阅读量258

点赞数 1

文章标签：数据库 php 前端 ViewUI

原文链接：http://www.cnblogs.com/web-fusheng/p/6706090.html

版权

今天按照要求，要做一个登陆、注册表单，本来样式做好就行了，本来咱就是干前端的，但让咱自己都没想到的是，不到一个小时竟然都干完了，实在闲的蛋疼，就想到链接数据库玩，遥想当年，毕竟咱也是写过后台的，哪知，咳咳，真要是写了，真是一万个草拟吗，在心中奔腾。

公司项目是用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引用没有写完整,因为新浪的编辑器好像不支持直接写代码是的。