thinkphp3.2.3+bui框架使用store做表单数据绑定并使用ajax向后台发送表单数据

前言：学习使用bui框架，还未学习bui的ajax接口，故先使用jquery的ajax搞一波。

首先是html代码

<ul class="bui-list">
                    <li class="bui-btn bui-box clearactive">
                        <span class="bui-label">
                            手机号：
                        </span>
                        <div class="span1">
                            <div class="bui-input">
                                <input b-model="page.user.userpnumber" class="bui-input" id="userpnumber" placeholder="请输入手机号" type="number"/>
                            </div><!--b-model="page.user.userpnumber"是bui数据驱动的双向绑定，input应该使用b-model,
                            page.user.username绑定的是page作用域
                            （即bui.store({})中的scope,下的data数据对象的user对象的userpnumber属性）-->
                        </div>
                    </li>
                    <li class="bui-btn bui-box clearactive">
                        <span class="bui-label">
                            用户名：
                        </span>
                        <div class="span1">
                            <div class="bui-input">
                                <input b-model="page.user.username" class="bui-input" id="username" placeholder="请输入用户名" type="text"/>
                            </div><!--b-model="page.user.username"是bui数据驱动的双向绑定，input应该使用b-model,
                            page.user.username绑定的是page作用域
                            （即bui.store({})中的scope,下的data数据对象的user对象的username属性）-->
                        </div>
                    </li>
                    <li class="bui-btn bui-box clearactive">
                        <span class="bui-label">
                            密码：
                        </span>
                        <div class="span1">
                            <div class="bui-input">
                                <input b-model="page.user.userpwd" class="bui-input" id="userpwd" placeholder="请输入密码" type="password"/>
                            </div><!--b-model="page.user.userpwd"是bui数据驱动的双向绑定，input应该使用b-model,
                            page.user.username绑定的是page作用域
                            （即bui.store({})中的scope,下的data数据对象的user对象的userpwd属性）-->
                        </div>
                    </li>
                    <li class="bui-btn bui-box clearactive">
                        <span class="bui-label">
                            确认密码：
                        </span>
                        <div class="span1">
                            <div class="bui-input">
                                <input b-model="page.user.userpwdCon" class="bui-input" id="userpwdCon" placeholder="请输入密码" type="password">
                            </div><!--b-model="page.user.userpwdCon"是bui数据驱动的双向绑定，input应该使用b-model,
                            page.user.username绑定的是page作用域
                            （即bui.store({})中的scope,下的data数据对象的user对象的userpwdCon属性）-->
                        </div>
                    </li>
                </ul>

然后是js代码

<script>
        bui.ready(function () {
             var bs=bui.store({
                scope:"page",
                data:{
                    user:{
                        "username":"",
                        "userpnumber":"",
                        "userpwd":"",
                        "userpwdCon":""
                    }/*注册用的user对象，使用JSON格式表示，这里要严格的遵循JSON格式,即键名与值均包含在双引号内，不可用单引号*/
                },
                methods:{
                    register:function(){
                        if(this.user.userpwd!=this.user.userpwdCon){
                            bui.hint('两次密码需要保持一致');
                        }else{
                           let _self=this;//由于点击事件的this为register()方法，为了在success中对user对象进行操作，用_self保存下来
                        $.ajax({
                            url:"doRegister",
                            type:"post",/*提交方式为post*/
                            data:{"user":JSON.stringify(_self.user)},/*以键值对的方式提交JSON数据，设置用双引号包含的键名以及把JSON对象利用JSON.stringify()函数转化为字符串*/
                           dataType:"json",/*将数据类型设为json*/
                            success:function (ss) {
                                if(ss>-1)
                                window.location='login';
                            },
                            error:function (data) {
                        }
                        }) 
                        }
                    }
                }
            });
        })
    </script>

然后是php后台代码

 public function doRegister()
    {

        $jsonuser = $_POST['user'];//由于在$.ajax()中用的是post方式，从$_POST中获取JSON字符串
        $user = json_decode($jsonuser, true);//使用json_decode()方法把JSON字符串解码为php关联数组，
        //所以方法的assoc参数值为true,assoc就是关联的意思，意为把JSON字符串转化为php关联数组
        //否则会转化为php对象
        $userdao = new UserinfoModel();
        $result = $userdao->addUser($user);
        echo $result;
    }

这样就可以了。