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

最新推荐文章于 2024-07-30 17:19:26 发布

不求猿

最新推荐文章于 2024-07-30 17:19:26 发布

阅读量473

点赞数 1

分类专栏：笔记文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/qq_50879110/article/details/124504857

版权

笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

新增用户页面，难点：
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
评论
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"></scr
复制链接

扫一扫