ajax发送表单给后台,并且数据展示

新增用户页面,难点:
1.多选项的遍历

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新增用户</title>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
</head>
<body>
<!--<form method="get" th:action="@{/user/addUser}">-->
<form>
        <table  class="tablex">
        <tr>
            <td>姓名</td>
            <td><input name="name" placeholder="请输入您的名字"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="gender" value="男"> 男
                <input type="radio" name="gender" value="女"> 女
            </td>
        </tr>
        <tr>
            <td>籍贯</td>
            <td>
                <select name="place">
                    <option value="" selected=selected>---请选择---</option>
                    <option value="石家庄">石家庄</option>
                    <option value="邯郸">邯郸</option>
                    <option value="沧州">沧州</option>
                    <option value="廊坊">廊坊</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>专长</td>
            <td>
                <input type="checkbox" name="skill" value="Java"> Java
                <input type="checkbox" name="skill" value="NET"> NET
                <input type="checkbox" name="skill" value="PHP"> PHP
            </td>
        </tr>
        <tr>
<!--            <td colspan="2"><input type="submit" value="[确认添加]"></td>-->
            <td colspan="2"><input type="button" onclick="addUser()" value="提交"></td>
        </tr>
    </table>
</form>

</body>
<script type="text/javascript">
    function addUser(){
        var emp = {
            ename : $("input[name]").val(),
            gender:$("input[name='gender']:checked").val(),
            place : $("select option:selected").val(),
            skills : getSkill()
        };
        console.log(emp);
        $.ajax({
            type: 'post',
            url: 'user/addUser',
            contentType:"application/json;charset=utf-8",
            data: JSON.stringify(emp),
            success: function (data) {
                console.log(data)
            },
            error:function (data) {
                console.log(data)
            }
        });
    };
    // 获取检查项checkbox选中项
    function getSkill() {
        var skill = []; //创建List集合
        $("input[name='skill']:checked").each(function (i,value) {
            skill.push({id:$(this).val()});
        });
        return skill;
    }



</script>
<style type="text/css">
    .tablex{
        border: 1px solid #ccc;border-collapse: collapse; width:80%;text-align:center;
    }
    .tablex th,.tablex td{
        border: 1px solid #ccc;padding: 10px;text-align:center;
    }
</style>
</html>

后台接受
在这里插入图片描述

有中间表的查询用户信息

<mapper namespace="com.wfy.springboot04.mapper.UserMapper">
    <resultMap id="Emps" type="com.wfy.springboot04.pojo.Emp">
        <result property="id" column="id"/>
        <result property="name" column="name"/>
        <result property="gender" column="gender"/>
        <result property="place" column="place"/>
            <!-- 定义接受类型   -->
        <collection property="skill" ofType="com.wfy.springboot04.pojo.Skill">
            <result property="skill" column="skill"/>
        </collection>
    </resultMap>
    <!-- 查询所有用户   -->
    <select id="query" resultMap="Emps">
         select u.*,s.skill
         from t_user u,t_skill s,t_user_sk t
         where u.id =t.uid
         and t.sid=s.id;
    </select>

前台展示
在这里插入图片描述

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值