div能post提交吗_【20201211】做个用户管理系统（24）——修改个人资料（一）提交表单...

1. 介绍

1.1 介绍

福哥今天要带着大家完成修改个人资料表单的功能。修改个人资料表单和注册、登录表单不同，它不仅仅是将用户填写的数据提交到服务器，还要在进入修改个人资料表单的时候将上一次填写的内容展示到表单里面。也就是说，用户可以修改其中一部分，也可以什么都不修改，用户需要知道每个表单项自己曾经填写的数据是什么。

将用户填写的表单数据提交到服务器这部分，我们轻车熟路了，今天福哥就先带着大家把这一部分完成。

个人资料修改表单里面，生日的年份要符合实际情况，未来的时间不行(不能给没出生的人注册)，太久远的时间也不行(160年以前的人应该已经上天堂了)，所以我们设置的时间段在160年前到今年为止这一段。

2. 视图模板

2.1 HTML代码

<div class="row login-form">    <div class="col-sm-12">        <h3 class="text-center">个人资料修改h3>        <p>这里是修改个人资料的地方p>        <form>            <div class="form-group">                <label><span class="form-required-tag">*span> 昵称label>                <input class="form-control" type="text" name="nick" />            div>            <div class="form-group">                <label><span class="form-required-tag">*span> 性别label>                <div>                    <label>                        <input type="radio" name="gender" value="male" />                        男士                    label>                    <label>                        <input type="radio" name="gender" value="female" />                        女士                    label>                div>            div>            <div class="form-group">                <label><span class="form-required-tag">*span> 生日label>                <div>                    <select class="form-control d-inline" name="year" style="width: 80px;">                        <option value="">年份option>                        <% foreach item=cItem from=$birthYearArr %>                        <option value=""><% $cItem %>option>                        <% /foreach %>                    select> <label>年label>                    <select class="form-control d-inline" name="month" style="width: 80px;">                        <option value="">月份option>                        <option value="1">1option>                        <option value="2">2option>                        <option value="3">3option>                        <option value="4">4option>                        <option value="5">5option>                        <option value="6">6option>                        <option value="7">7option>                        <option value="8">8option>                        <option value="9">9option>                        <option value="10">10option>                        <option value="11">11option>                        <option value="12">12option>                    select> <label>月label>                div>            div>            <div class="form-group">                <label>学历label>                <select class="form-control" name="edu">                    <option>学历选择option>                    <option value="hs">中学option>                    <option value="ts">中专/技校option>                    <option value="cg">大学专科option>                    <option value="ug">大学专科option>                    <option value="md">硕士option>                    <option value="dc">博士option>                select>            div>            <div class="form-group">                <label>介绍label>                <textarea class="form-control" name="note">textarea>            div>            <div class="form-group">                <button class="btn btn-primary btn-sm form-control">保存button>            div>        form>    div>div>

2.2 JS代码

$('form').form({    url: "server->BASE_URI %>api/member/profile",    method: "post",    validations: [        {type:"empty", name:"nick", msg:"请填写昵称"},        {type:"empty", name:"gender", msg:"请选择性别"},        {type:"empty", name:"year", msg:"请选择生日"},        {type:"empty", name:"month", msg:"请选择生日"},    ],    onSuccess: function (d) {        if(d.errcode == 0){            document.location = 'server->BASE_URI %>member/profile.htm';        }        else{            $('form').tips({                text:d.errmsg            });        }    },    onError: function (d) {        $('form').tips({            text:"服务器响应错误"        });    },    onValidationError: function (form, name, msg) {        $('form').tips({            text:msg        });        $('form').find('[name="'+ name +'"]').focus();    }});

3. 页面控制器

3.1 代码

protected function user_process(){    $this->title = "修改个人资料 - 会员中心首页";    //    $this->setTplVar("birthYearArr", Dictionary::getBirthYearArr());}

4. 接口控制器

4.1 代码

protected function user_process(){    $req = $this->tfphp->getRequest();    $post = $req->post;    $user = new user($this->tfphp);    $nick = $post->get("nick");    $gender = $post->get("gender");    $iGender = Dictionary::getArrId(Dictionary::$genderArr, $gender);    $year = $post->get("year");    $month = $post->get("month");    $edu = $post->get("edu");    $iEdu = Dictionary::getArrId(Dictionary::$eduArr, $edu);    $note = $post->get("note");    try{        // request test        if($nick == "" || $gender == "" || $year == "" || $month == ""){            return $this->tfphp->getResponse()->responseJSON_CM(200, 1001031, "错误请求");        }        // create user        $ret = $user->setProfile($this->permission->getLoginStatus()->userID,            $nick,            $iGender,            $year."-".$month."-1",            $iEdu,            $note);        switch ($ret){            case 1:                return $this->tfphp->getResponse()->responseJSON_CM(200, 1001032, "用户名不存在");                break;            case 2:                return $this->tfphp->getResponse()->responseJSON_CM(200, 1001033, "保存个人资料失败");                break;        }    }    catch(\TypeError $e){        return $this->tfphp->getResponse()->responseJSON_CM(200, 1001031, "错误请求");    }    // output    return $this->tfphp->getResponse()->responseJSON_CM(200, 0, "OK");}

5. 讲解

5.1 视图模板

5.1.1 HTML

模板没什么可说的，这里面用到了一个Smarty的循环语法，将控制器传进来的$birthYearArr数组遍历之后输出了一个下拉框的选项的HTML代码。

5.1.2 JS

JS代码相比注册、登录要简单一些，因为没有验证码的逻辑。

5.2 页面控制器

这里面调用了字典库的一个方法getBirthYearArr得到了比较合理的生日年份时间段的数组。

5.3 接口控制器

一个标准的表单处理程序，有几点福哥特别说明一下。

• 性别的数据库字段类型是整型，而表单提交的数据是字符串，需要使用字典库转换一下

• 生日的数据库字段类型是日期，需要将表单的year和month拼起来并且在后面加上一个“-1”，因为标准日期是年、月、日，就补上一个“1日”保持格式正确。

• 学历的数据库字段类型是整型，而表单提交的数据也是字符串，也需要转换一下。

6. 总结

今天福哥带着童鞋们完成了修改个人资料表单的提交功能。现在通过表单填写的各种形式的数据都已经可以正常提交到数据库里了。不过，再次进入修改个人资料表单之后会发现表单是空的，刚刚填写的都没有了。是的，这就是我们还没有完成的部分了。

下一课，福哥将带着童鞋们完成修改个人资料表单的后一部分功能，表单数据载入。

---

【20201210】做个用户管理系统(23)——授权模式的设计和使用

【20201209】做个用户管理系统(22)——用户登录状态(二)AJAX的应用

---

免费看文章，自己学技术

---

每一篇文章都是福哥一个字一个字地敲出来的，都是福哥原创的。

每一篇文章都是经过了福哥的反复验证的，都是可以正常使用的。

---