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
    评论
要将表单中的数据发送后台进行保存,你可以使用前端AJAX 或者 Fetch API 来发送 POST 请求。在后台,你可以使用 Express、Koa 或其他 Node.js 框架来处理这个请求并保存数据数据库。 以下是一个示例代码,展示了如何使用 Fetch API 将表单数据发送后台前端代码(使用 Fetch API): ```javascript const form = document.querySelector('form'); form.addEventListener('submit', (e) => { e.preventDefault(); // 阻止默认的表单提交行为 const formData = new FormData(form); fetch('/save-data', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => { console.log(data); // 可选:处理从后台返回的响应数据 }) .catch(error => { console.error(error); // 可选:处理错误 }); }); ``` 后端代码(使用 Express): ```javascript const express = require('express'); const app = express(); const bodyParser = require('body-parser'); const sql = require('mssql'); // 创建数据库连接配置 const config = { server: 'CRMTEST', user: 'sa', password: 'Servo01', database: 'demo' } // 解析请求体的中间件 app.use(bodyParser.urlencoded({ extended: false })); // 处理保存数据的路由 app.post('/save-data', (req, res) => { const { name, email, password } = req.body; // 创建连接池并连接数据库 sql.connect(config, (err) => { if (err) { console.log(err); res.status(500).json({ message: '保存数据时出错' }); return; } // 创建 request 对象 const request = new sql.Request(); // 执行插入操作 request.query(`INSERT INTO username (name, email, password) VALUES ('${name}', '${email}', '${password}')`, (err, result) => { if (err) { console.log(err); res.status(500).json({ message: '保存数据时出错' }); return; } console.log('用户信息已成功插入数据库'); res.json({ message: '数据保存成功' }); }); }); }); // 启动服务器 app.listen(8280, () => { console.log('服务器已启动,监听端口 8280'); }); ``` 请注意,以上代码只是一个示例,你需要根据你的实际需求进行适当的修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值