当前位置：首页 > 文章列表 > 文章 > 前端 > 复选框值提交与获取方法详解

复选框值提交与获取方法详解

2025-07-21 19:54:19 0浏览收藏

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《复选框值提交与服务器获取指南》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

正确处理HTML表单中复选框值提交与服务器端获取的指南

本教程详细阐述了在Web应用中，如何正确构建HTML表单以确保复选框值能在其状态改变时被成功提交，并在服务器端（以Node.js Express为例）准确获取。文章将深入分析常见的表单结构陷阱，提供最佳实践的HTML和JavaScript代码示例，并指导如何在后端有效地处理这些提交的数据，确保数据流的完整性与可靠性。

1. 理解复选框值提交的核心问题

在Web开发中，当我们需要通过复选框的状态变化来触发表单提交，并获取其对应的值时，常会遇到一些挑战。一个常见的问题是，如果HTML表单结构不正确，或者JavaScript事件处理逻辑有误，服务器端可能无法接收到预期的复选框值。

核心要点在于：

表单元素的归属： 任何需要提交到服务器的数据输入元素（如、）都必须嵌套在其所属的<form>标签内部。</li><li><strong>name属性的重要性：</strong> 所有需要提交的表单元素都必须设置name属性。服务器端会通过这个name属性来识别和获取对应的值。</li><li><strong>复选框的值：</strong> 当复选框被选中时，其value属性的值才会被提交。如果未选中，则不会提交任何值。</li></ul><h3>2. 修正HTML表单结构</h3><p>原始代码中存在一个关键的HTML结构问题：<form action="/delete" id="listForm" method="POST"></form> 这段代码创建了一个空的表单并立即关闭，导致后续的复选框<input type="checkbox" ...>并不在这个表单内部。因此，当复选框触发提交时，它无法正确地将自己的值与该表单关联起来。</p><p>要解决这个问题，每个需要独立提交的复选框及其相关内容都应该被封装在自己的<form>标签内。这样，当复选框的状态改变时，this.form.submit()（或通过JavaScript事件监听器获取的event.target.form.submit()）就能准确地找到并提交包含该复选框的表单。</p><p>以下是修正后的EJS模板HTML代码示例：</p><pre><%- include('header'); -%> <div class="box"> <h1 id="heading"><%= listTitle %></h1> </div> <div class="box"> <% listItems.forEach(function(item){%>  <form action="/delete" method="POST"> <div class="item"> <input type="checkbox" name="checkbox" value="<%= item._id %>" onChange="this.form.submit()">  <p><%=item.name%></p> </div> </form> <% }); %> <form action="/" method="POST" class="item"> <input class="last-child" type="text" name="newItem" placeholder="New Item"> <button type="submit" name="list" value=<%= listTitle %>>+</button> </form> </div>  <script> // 建议使用事件委托或遍历所有checkbox添加事件监听器 // 这里以一个简单的例子说明如何通过JS提交 document.querySelectorAll("input[name='checkbox']").forEach(checkbox => { checkbox.addEventListener("change", function(e){ if (e.target.checked){ // 确保e.target.form指向包含当前checkbox的正确表单 e.target.form.submit(); } }); }); </script> <%- include('footer') -%></pre><p><strong>关键修正点：</strong></p><ul><li>每个div.item（包含一个复选框和一个p标签）都被一个独立的<form action="/delete" method="POST">标签包裹。</li><li>复选框的name="checkbox"属性确保了其值在提交时能够被识别。</li><li>onChange="this.form.submit()"是一个便捷的“快捷方式”，它利用了DOM中this关键字在事件处理函数中指向当前元素，并通过this.form访问其父级表单，然后调用表单的submit()方法。</li></ul><h3>3. 服务器端获取复选框值</h3><p>一旦前端表单结构正确并成功提交，服务器端就可以通过请求体（Request Body）来获取复选框的值。对于Node.js和Express框架，通常使用body-parser（或Express内置的express.json()和express.urlencoded()中间件）来解析请求体。</p><p>当复选框被选中并提交时，其name属性（例如checkbox）将作为键，其value属性（例如item._id）将作为值，出现在req.body对象中。</p><p>以下是Node.js Express服务器端代码示例：</p><pre>const express = require("express"); const bodyParser = require("body-parser"); // 如果Express版本低于4.16，可能需要单独引入 const app = express(); // 配置Express使用body-parser来解析URL编码的请求体 // 对于Express 4.16.0+，可以直接使用 express.urlencoded() app.use(bodyParser.urlencoded({ extended: true })); // 或者 app.use(express.urlencoded({ extended: true })); // 假设这里有你的数据库模型和默认数据 // const todo = require("./models/todo"); // 假设你的todo模型在这里 // const todoDefault = [{ name: "Buy groceries" }, { name: "Clean room" }]; // GET 路由（保持不变，与问题无关） app.get("/", function(req, res){ // ... 你的 GET 逻辑 ... // 示例： // todo.find({}).then(function(todos){ // if(todos.length === 0){ // todo.insertMany(todoDefault).then(() => console.log("Successfully Inserted")).catch(err => console.log(err)); // res.redirect("/"); // } else { // res.render("list", {listTitle: "Today", listItems: todos}); // } // }).catch(err => console.log(err)); res.render("list", { listTitle: "Today", listItems: [{_id: "1", name: "Item 1"}, {_id: "2", name: "Item 2"}] }); }); // POST /delete 路由，用于处理复选框提交 app.post("/delete", function(req, res){ // req.body.checkbox 将包含被选中复选框的 value 值 const checkedItemId = req.body.checkbox; console.log("接收到的复选框值 (itemId):", checkedItemId); // 在这里执行删除操作，例如： // todo.findByIdAndRemove(checkedItemId).then(function(){ // console.log("成功删除项目:", checkedItemId); // res.redirect("/"); // 删除后重定向回主页 // }).catch(function(err){ // console.log("删除失败:", err); // res.redirect("/"); // }); res.redirect("/"); // 示例中直接重定向 }); // 启动服务器 // app.listen(3000, function() { // console.log("Server started on port 3000"); // });</pre><p><strong>代码解释：</strong></p><ul><li>app.use(bodyParser.urlencoded({ extended: true })); 或 app.use(express.urlencoded({ extended: true })); 是必需的中间件，用于解析来自HTML表单的URL编码数据。extended: true 允许解析更复杂的嵌套对象。</li><li>在app.post("/delete", ...)路由中，req.body.checkbox可以直接访问到name="checkbox"的复选框所提交的值。</li></ul><h3>4. 提交表单的快捷方式与最佳实践</h3><p><strong>快捷方式：onChange="this.form.submit()"</strong> 这种方法直接在HTML元素上绑定事件，当复选框状态改变时，立即提交其父级表单。它简洁明了，适用于简单的交互场景。</p><p><strong>JavaScript事件监听器：</strong> 虽然onChange属性很方便，但在更复杂的应用中，推荐使用JavaScript事件监听器（如addEventListener）来分离HTML结构和行为逻辑。这样可以使代码更易于维护和扩展。</p><pre>// 在 <script> 标签内 document.querySelectorAll("input[name='checkbox']").forEach(checkbox => { checkbox.addEventListener("change", function(e){ if (e.target.checked){ // e.target 指向触发事件的元素 (即当前的checkbox) // e.target.form 指向该checkbox所属的表单 e.target.form.submit(); } }); });</pre><p>这种方法通过document.querySelectorAll获取所有name='checkbox'的复选框，并为每个复选框添加事件监听器。当事件触发时，e.target指向当前的复选框，e.target.form则指向其所属的表单，从而实现提交。</p><p><strong>注意事项：</strong></p><ul><li><strong>多选复选框：</strong> 如果有多个复选框使用相同的name属性（例如name="categories"），并且都选中，提交后在服务器端req.body.categories将是一个包含所有选中value的数组。</li><li><strong>安全性：</strong> 在处理任何来自客户端的数据时，务必进行服务器端验证和清理，以防止恶意输入或攻击（如SQL注入、XSS等）。</li><li><strong>用户体验：</strong> 自动提交表单可能会让用户感到意外，尤其是在网络条件不佳时。对于需要确认的操作，考虑添加一个确认对话框或显式的提交按钮。对于删除操作，通常需要用户点击一个明确的删除按钮来触发，而不是仅仅勾选一个复选框。</li></ul><h3>5. 总结</h3><p>成功地从前端提交复选框值并在后端获取，关键在于确保正确的HTML表单结构，即复选框必须嵌套在其意图提交数据的<form>标签内。无论是使用HTML的onChange属性还是JavaScript的事件监听器来触发提交，其核心都是找到正确的父级表单并调用其submit()方法。在服务器端，使用适当的中间件（如Express的urlencoded）可以轻松地通过req.body对象访问到这些提交的值。遵循这些原则将确保数据流的顺畅和应用的可靠性。</p><p>终于介绍完啦！小伙伴们，这篇关于《复选框值提交与获取方法详解》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！</p> </div> <div class="labsList"> </div> <div class="cateBox"> <div class="cateItem"> <a href="/article/270267.html" title="Java正则表达式应用与匹配技巧" class="img_box"> <img src="/uploads/20250721/1753098796687e2a2c20b56.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Java正则表达式应用与匹配技巧">Java正则表达式应用与匹配技巧 </a> <dl> <dt class="lineOverflow"><a href="/article/270267.html" title="Java正则表达式应用与匹配技巧" class="aBlack">上一篇<i></i></a></dt> <dd class="lineTwoOverflow">Java正则表达式应用与匹配技巧</dd> </dl> </div> <div class="cateItem"> <a href="/article/270269.html" title="MySQL中AS别名用法详解及示例" class="img_box"> <img src="/uploads/20250721/1753098860687e2a6cca6d1.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="MySQL中AS别名用法详解及示例"> </a> <dl> <dt class="lineOverflow"><a href="/article/270269.html" class="aBlack" title="MySQL中AS别名用法详解及示例">下一篇<i></i></a></dt> <dd class="lineTwoOverflow">MySQL中AS别名用法详解及示例</dd> </dl> </div> </div> </div> </div> <div class="leftContBox pt0"> <div class="pdl20"> <div class="contTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit">最新文章</div> </div> </div> <ul class="newArticleList"> <li> <div class="contBox"> <a href="/article/270557.html" class="img_box" title="async函数并行与串行执行方法"> <img src="/uploads/20250721/1753112900687e6144c1449.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="async函数并行与串行执行方法"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 6小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/270557.html" class="aBlack" target="_blank" title="async函数并行与串行执行方法">async函数并行与串行执行方法</a> </dt> <dd class="cont2"> <span><i class="view"></i>454浏览</span> <span class="collectBtn user_collection" data-id="270557" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/270541.html" class="img_box" title="Fetch设置Referer的正确方式"> <img src="/uploads/20250721/1753112179687e5e7377eb8.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="Fetch设置Referer的正确方式"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 6小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/270541.html" class="aBlack" target="_blank" title="Fetch设置Referer的正确方式">Fetch设置Referer的正确方式</a> </dt> <dd class="cont2"> <span><i class="view"></i>227浏览</span> <span class="collectBtn user_collection" data-id="270541" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/270540.html" class="img_box" title="纯JS实现页面跳转的几种方法"> <img src="/uploads/20250721/1753112179687e5e7390455.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="纯JS实现页面跳转的几种方法"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 6小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/270540.html" class="aBlack" target="_blank" title="纯JS实现页面跳转的几种方法">纯JS实现页面跳转的几种方法</a> </dt> <dd class="cont2"> <span><i class="view"></i>325浏览</span> <span class="collectBtn user_collection" data-id="270540" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/270532.html" class="img_box" title="CSS伪元素before/after使用技巧"> <img src="/uploads/20250721/1753111758687e5cce4461c.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS伪元素before/after使用技巧"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 6小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/270532.html" class="aBlack" target="_blank" title="CSS伪元素before/after使用技巧">CSS伪元素before/after使用技巧</a> </dt> <dd class="cont2"> <span><i class="view"></i>240浏览</span> <span class="collectBtn user_collection" data-id="270532" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/270531.html" class="img_box" title="JS如何调用CSSHoudini？6大API突破样式限制"> <img src="/uploads/20250721/1753111693687e5c8d402cb.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="JS如何调用CSSHoudini？6大API突破样式限制"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 6小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/270531.html" class="aBlack" target="_blank" title="JS如何调用CSSHoudini？6大API突破样式限制">JS如何调用CSSHoudini？6大API突破样式限制</a> </dt> <dd class="cont2"> <span><i class="view"></i>450浏览</span> <span class="collectBtn user_collection" data-id="270531" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/270529.html" class="img_box" title="HTML5语义标签有哪些及使用优势"> <img src="/uploads/20250721/1753111642687e5c5a4e53d.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="HTML5语义标签有哪些及使用优势"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 6小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/270529.html" class="aBlack" target="_blank" title="HTML5语义标签有哪些及使用优势">HTML5语义标签有哪些及使用优势</a> </dt> <dd class="cont2"> <span><i class="view"></i>194浏览</span> <span class="collectBtn user_collection" data-id="270529" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/270528.html" class="img_box" title="Next.js13.4多页面404解决方法分享"> <img src="/uploads/20250721/1753111640687e5c58272f0.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="Next.js13.4多页面404解决方法分享"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 6小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/270528.html" class="aBlack" target="_blank" title="Next.js13.4多页面404解决方法分享">Next.js13.4多页面404解决方法分享</a> </dt> <dd class="cont2"> <span><i class="view"></i>132浏览</span> <span class="collectBtn user_collection" data-id="270528" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/270527.html" class="img_box" title="call与apply区别全解析"> <img src="/uploads/20250721/1753111577687e5c19ef5fb.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="call与apply区别全解析"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 6小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/270527.html" class="aBlack" target="_blank" title="call与apply区别全解析">call与apply区别全解析</a> </dt> <dd class="cont2"> <span><i class="view"></i>494浏览</span> <span class="collectBtn user_collection" data-id="270527" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/270524.html" class="img_box" title="禁用按钮样式保持方法详解"> <img src="/uploads/20250721/1753111456687e5ba08f093.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="禁用按钮样式保持方法详解"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 6小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/270524.html" class="aBlack" target="_blank" title="禁用按钮样式保持方法详解">禁用按钮样式保持方法详解</a> </dt> <dd class="cont2"> <span><i class="view"></i>229浏览</span> <span class="collectBtn user_collection" data-id="270524" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/270515.html" class="img_box" title="CSS弹跳动效实现方法详解"> <img src="/uploads/20250721/1753110975687e59bfded62.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="CSS弹跳动效实现方法详解"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 7小时前 | <a href="javascript:;" class="aLightGray" title="性能优化">性能优化</a> <a href="javascript:;" class="aLightGray" title="transform">transform</a> <a href="javascript:;" class="aLightGray" title="@keyframes">@keyframes</a> <a href="javascript:;" class="aLightGray" title="cubic-bezier">cubic-bezier</a> <a href="javascript:;" class="aLightGray" title="CSS弹跳动效">CSS弹跳动效</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/270515.html" class="aBlack" target="_blank" title="CSS弹跳动效实现方法详解">CSS弹跳动效实现方法详解</a> </dt> <dd class="cont2"> <span><i class="view"></i>357浏览</span> <span class="collectBtn user_collection" data-id="270515" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/270514.html" class="img_box" title="BOM中如何调用浏览器条码扫描API？"> <img src="/uploads/20250721/1753110978687e59c226461.png" onerror="this.src='/assets/images/moren/morentu.png'" alt="BOM中如何调用浏览器条码扫描API？"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 7小时前 | </span> </dd> <dt class="lineOverflow"> <a href="/article/270514.html" class="aBlack" target="_blank" title="BOM中如何调用浏览器条码扫描API？">BOM中如何调用浏览器条码扫描API？</a> </dt> <dd class="cont2"> <span><i class="view"></i>414浏览</span> <span class="collectBtn user_collection" data-id="270514" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> <li> <div class="contBox"> <a href="/article/270508.html" class="img_box" title="响应式产品布局技巧分享"> <img src="/uploads/20250721/1753110577687e58315c194.jpg" onerror="this.src='/assets/images/moren/morentu.png'" alt="响应式产品布局技巧分享"> </a> <dl> <dd class="cont1"> <span> <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> · <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a> | 7小时前 | <a href="javascript:;" class="aLightGray" title="响应式布局">响应式布局</a> <a href="javascript:;" class="aLightGray" title="FLEXBOX">FLEXBOX</a> <a href="javascript:;" class="aLightGray" title="CSSGrid">CSSGrid</a> <a href="javascript:;" class="aLightGray" title="图片自适应">图片自适应</a> <a href="javascript:;" class="aLightGray" title="图片加载优化">图片加载优化</a> </span> </dd> <dt class="lineOverflow"> <a href="/article/270508.html" class="aBlack" target="_blank" title="响应式产品布局技巧分享">响应式产品布局技巧分享</a> </dt> <dd class="cont2"> <span><i class="view"></i>205浏览</span> <span class="collectBtn user_collection" data-id="270508" data-type="article" title="收藏"><i class="collect"></i>收藏</span> </dd> </dl> </div> </li> </ul> </div> </div> <div class="mainRight">  <div class="rightContBox" style="margin-top: 0px;"> <div class="rightTit"> <a href="/courselist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">课程推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/course/9.html" class="img_box" target="_blank" title="前端进阶之JavaScript设计模式"> <img src="/uploads/20221222/52fd0f23a454c71029c2c72d206ed815.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="前端进阶之JavaScript设计模式"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/9.html" target="_blank" class="aBlack" title="前端进阶之JavaScript设计模式">前端进阶之JavaScript设计模式</a></dt> <dd class="cont1 lineTwoOverflow"> 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。 </dd> <dd class="cont2">542次学习</dd> </dl> </li> <li> <a href="/course/2.html" class="img_box" target="_blank" title="GO语言核心编程课程"> <img src="/uploads/20221221/634ad7404159bfefc6a54a564d437b5f.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="GO语言核心编程课程"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/2.html" target="_blank" class="aBlack" title="GO语言核心编程课程">GO语言核心编程课程</a></dt> <dd class="cont1 lineTwoOverflow"> 本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。 </dd> <dd class="cont2">511次学习</dd> </dl> </li> <li> <a href="/course/74.html" class="img_box" target="_blank" title="简单聊聊mysql8与网络通信"> <img src="/uploads/20240103/bad35fe14edbd214bee16f88343ac57c.png" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="简单聊聊mysql8与网络通信"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/74.html" target="_blank" class="aBlack" title="简单聊聊mysql8与网络通信">简单聊聊mysql8与网络通信</a></dt> <dd class="cont1 lineTwoOverflow"> 如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让 </dd> <dd class="cont2">498次学习</dd> </dl> </li> <li> <a href="/course/57.html" class="img_box" target="_blank" title="JavaScript正则表达式基础与实战"> <img src="/uploads/20221226/bbe4083bb3cb0dd135fb02c31c3785fb.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="JavaScript正则表达式基础与实战"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/57.html" target="_blank" class="aBlack" title="JavaScript正则表达式基础与实战">JavaScript正则表达式基础与实战</a></dt> <dd class="cont1 lineTwoOverflow"> 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。 </dd> <dd class="cont2">487次学习</dd> </dl> </li> <li> <a href="/course/28.html" class="img_box" target="_blank" title="从零制作响应式网站—Grid布局"> <img src="/uploads/20221223/ac110f88206daeab6c0cf38ebf5fe9ed.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="从零制作响应式网站—Grid布局"> </a> <dl> <dt class="lineTwoOverflow"><a href="/course/28.html" target="_blank" class="aBlack" title="从零制作响应式网站—Grid布局">从零制作响应式网站—Grid布局</a></dt> <dd class="cont1 lineTwoOverflow"> 本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。 </dd> <dd class="cont2">484次学习</dd> </dl> </li> </ul> </div> <div class="rightContBox"> <div class="rightTit"> <a href="/ai.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">AI推荐</div> </div> <ul class="lessonRecomRList"> <li> <a href="/ai/13052.html" target="_blank" title="AI简历生成器：UP简历，免费在线制作专业简历，提升求职成功率" class="img_box"> <img src="/uploads/20250721/1753086602687dfa8aa7e9c.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="AI简历生成器：UP简历，免费在线制作专业简历，提升求职成功率" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13052.html" class="aBlack" target="_blank" title="UP简历">UP简历</a></dt> <dd class="cont1 lineTwoOverflow"> UP简历，一款免费在线AI简历生成工具，助您快速生成专业个性化简历，提升求职竞争力。3分钟快速生成，AI智能优化，多样化排版，免费导出PDF。 </dd> <dd class="cont2">9次使用</dd> </dl> </li> <li> <a href="/ai/13051.html" target="_blank" title="正版字体授权 - 字觅网：为设计赋能，版权无忧" class="img_box"> <img src="/uploads/20250721/1753087203687dfce364be2.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="正版字体授权 - 字觅网：为设计赋能，版权无忧" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13051.html" class="aBlack" target="_blank" title="字觅网">字觅网</a></dt> <dd class="cont1 lineTwoOverflow"> 字觅网，专注正版字体授权，为创作者、设计师和企业提供多样化字体选择，满足您的创作、设计和排版需求，保障版权合法性。 </dd> <dd class="cont2">8次使用</dd> </dl> </li> <li> <a href="/ai/13050.html" target="_blank" title="Style3D AI：服装箱包行业AI设计与营销解决方案" class="img_box"> <img src="/uploads/20250721/1753085402687df5da80d69.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Style3D AI：服装箱包行业AI设计与营销解决方案" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13050.html" class="aBlack" target="_blank" title="Style3D AI">Style3D AI</a></dt> <dd class="cont1 lineTwoOverflow"> Style3D AI，浙江凌迪数字科技打造，赋能服装箱包行业设计创作、商品营销、智能生产。AI创意设计助力设计师图案设计、服装设计、灵感挖掘、自动生成版片；AI智能商拍助力电商运营生成主图模特图、营销短视频。 </dd> <dd class="cont2">11次使用</dd> </dl> </li> <li> <a href="/ai/13049.html" target="_blank" title="Fast3D模型生成器：AI驱动，极速免费3D建模，无需登录" class="img_box"> <img src="/uploads/20250721/1753087802687dff3a853dc.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="Fast3D模型生成器：AI驱动，极速免费3D建模，无需登录" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13049.html" class="aBlack" target="_blank" title="Fast3D模型生成器">Fast3D模型生成器</a></dt> <dd class="cont1 lineTwoOverflow"> Fast3D模型生成器，AI驱动的3D建模神器，无需注册，图像/文本快速生成高质量模型，8秒完成，适用于游戏开发、教学、创作等。免费无限次生成，支持.obj导出。 </dd> <dd class="cont2">9次使用</dd> </dl> </li> <li> <a href="/ai/13048.html" target="_blank" title="扣子空间(Coze Space)：字节跳动通用AI Agent平台深度解析与应用" class="img_box"> <img src="/uploads/20250720/1752966602687c25cacafab.jpg" onerror="this.onerror='',this.src='/assets/images/moren/morentu.png'" alt="扣子空间(Coze Space)：字节跳动通用AI Agent平台深度解析与应用" style="object-fit:cover;width:100%;height:100%;"> </a> <dl> <dt class="lineTwoOverflow"><a href="/ai/13048.html" class="aBlack" target="_blank" title="扣子-Space（扣子空间）">扣子-Space（扣子空间）</a></dt> <dd class="cont1 lineTwoOverflow"> 深入了解字节跳动推出的通用型AI Agent平台——扣子空间(Coze Space)。探索其双模式协作、强大的任务自动化、丰富的插件集成及豆包1.5模型技术支撑，覆盖办公、学习、生活等多元应用场景，提升您的AI协作效率。 </dd> <dd class="cont2">29次使用</dd> </dl> </li> </ul> </div>  <div class="rightContBox"> <div class="rightTit"> <a href="/articlelist.html" class="more" title="查看更多">查看更多<i class="iconfont"></i></a> <div class="tit lineOverflow">相关文章</div> </div> <ul class="aboutArticleRList"> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/72840.html" class="aBlack" title="优化用户界面体验的秘密武器：CSS开发项目经验大揭秘">优化用户界面体验的秘密武器：CSS开发项目经验大揭秘</a></dt> <dd> <span class="left">2023-11-03</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/76259.html" class="aBlack" title="使用微信小程序实现图片轮播特效">使用微信小程序实现图片轮播特效</a></dt> <dd> <span class="left">2023-11-21</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/83771.html" class="aBlack" title="解析sessionStorage的存储能力与限制">解析sessionStorage的存储能力与限制</a></dt> <dd> <span class="left">2024-01-11</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/85057.html" class="aBlack" title="探索冒泡活动对于团队合作的推动力">探索冒泡活动对于团队合作的推动力</a></dt> <dd> <span class="left">2024-01-13</span> <span class="right">501浏览</span> </dd> </dl> </li> <li> <dl> <dt class="lineTwoOverflow"><a href="/article/91359.html" class="aBlack" title="UI设计中为何选择绝对定位的智慧之道">UI设计中为何选择绝对定位的智慧之道</a></dt> <dd> <span class="left">2024-02-03</span> <span class="right">501浏览</span> </dd> </dl> </li> </ul> </div> </div> </div> <div class="footer"> <div class="footerIn"> <div class="footLeft"> <div class="linkBox"> <a href="/about/1.html" target="_blank" class="aBlack" title="关于我们">关于我们</a> <a href="/about/5.html" target="_blank" class="aBlack" title="免责声明">免责声明</a> <a href="#" class="aBlack" title="意见反馈">意见反馈</a> <a href="/about/2.html" class="aBlack" target="_blank" title="联系我们">联系我们</a> <a href="/send.html" class="aBlack" title="广告合作">内容提交</a> </div> <div class="footTip">Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！</div> <div class="shareBox"> <span><i class="qq"></i>技术交流群</span> </div> <div class="copyRight"> Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ <a href="https://beian.miit.gov.cn/" target="_blank" title="备案">苏ICP备2023003363号-1</a> </div> </div> <div class="footRight"> <ul class="encodeList"> <li> <div class="encodeImg"> <img src="/assets/examples/qrcode_for_gh.jpg" alt="Golang学习网"> </div> <div class="tit">关注公众号</div> <div class="tip">Golang学习网</div> </li> <div class="clear"></div> </ul> </div> <div class="clear"></div> </div> </div>  <style> .popupBg .n-error{ color: red; } </style> <div class="popupBg"> <div class="loginBoxBox"> <div class="imgbg"> <img src="/assets/images/leftlogo.jpg" alt=""> </div>  <div class="loginInfo encodeLogin" style="display: none;"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.passwordLogin').show();"> <div class="tip">密码登录在这里</div> </div> <div class="encodeInfo"> <div class="tit"><i></i> 微信扫码登录或注册</div> <div class="encodeImg"> <span id="wx_login_qrcode"><img src="/assets/examples/code.png" alt="二维码"></span>  </div> <div class="tip">打开微信扫一扫，快速登录/注册</div> </div> <div class="beforeLoginTip">登录即同意 <a href="#" class="aBlue" title="用户协议">用户协议</a> 和 <a href="#" class="aBlue" title="隐私政策">隐私政策</a></div> </div>  <div class="loginInfo passwordLogin"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="changeLoginType cursorPointer create_wxqrcode" onclick="$('.loginInfo').hide();$('.encodeLogin').show();"> <div class="tip">微信登录更方便</div> </div> <div class="passwordInfo"> <ul class="logintabs selfTabMenu"> <li class="selfTabItem loginFormLi curr">密码登录</li> <li class="selfTabItem registerFormBox ">注册账号</li> </ul> <div class="selfTabContBox"> <div class="selfTabCont loginFormBox" style="display: block;"> <form name="form" id="login-form" class="form-vertical form" method="POST" action="/index/user/login"> <input type="hidden" name="url" value="//www.17golang.com/article/270268.html"/> <input type="hidden" name="__token__" value="d0a32c0c76dc489d413e18332db3a39f" /> <div class="form-group" style="height:70px;"> <input class="form-control" id="account" type="text" name="account" value="" data-rule="required" placeholder="邮箱/用户名" autocomplete="off"> </div> <div class="form-group" style="height:70px;"> <input class="form-control" id="password" type="password" name="password" data-rule="required;password" placeholder="密码" autocomplete="off"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/> </span> </div> <div class="other"> <a href="#" class="forgetPwd aGray" onclick="$('.loginInfo').hide();$('.passwordForget').show();" title="忘记密码">忘记密码</a> </div> <div class="loginBtn mt25"> <button type="submit">登录</button> </div> </form> </div> <div class="selfTabCont registerFormBox" style="display: none;"> <form name="form1" id="register-form" class="form-vertical form" method="POST" action="/index/user/register"> <input type="hidden" name="invite_user_id" value="0"/> <input type="hidden" name="url" value="//www.17golang.com/article/270268.html"/> <input type="hidden" name="__token__" value="d0a32c0c76dc489d413e18332db3a39f" /> <div class="form-group" style="height:70px;"> <input type="text" name="email" id="email2" data-rule="required;email" class="form-control" placeholder="邮箱"> </div> <div class="form-group" style="height:70px;"> <input type="text" id="username" name="username" data-rule="required;username" class="form-control" placeholder="用户名必须3-30个字符"> </div> <div class="form-group" style="height:70px;"> <input type="password" id="password2" name="password" data-rule="required;password" class="form-control" placeholder="密码必须6-30个字符"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" data-rule="required;length(4)" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <img src="/captcha.html" width="100" height="45" onclick="this.src = '/captcha.html?r=' + Math.random();"/> </span> </div> <div class="loginBtn"> <button type="submit">注册</button> </div> </form> </div> </div> </div> <div class="beforeLoginTip">登录即同意 <a href="https://www.17golang.com/about/3.html" target="_blank" class="aBlue" title="用户协议">用户协议</a> 和 <a href="https://www.17golang.com/about/4.html" target="_blank" class="aBlue" title="隐私政策">隐私政策</a></div> </div>  <div class="loginInfo passwordForget"> <div class="closeIcon" onclick="$('.popupBg').hide();"></div> <div class="returnLogin cursorPointer" onclick="$('.passwordForget').hide();$('.passwordLogin').show();">返回登录</div> <div class="passwordInfo"> <ul class="logintabs selfTabMenu"> <li class="selfTabItem">重置密码</li> </ul> <div class="selfTabContBox"> <div class="selfTabCont"> <form id="resetpwd-form" class="form-horizontal form-layer nice-validator n-default n-bootstrap form" method="POST" action="/api/user/resetpwd.html" novalidate="novalidate"> <div style="height:70px;"> <input type="text" class="form-control" id="email" name="email" value="" placeholder="输入邮箱" aria-invalid="true"> </div> <div class="codeBox" style="height:70px;"> <div class="form-group" style="height:70px; width:205px; float: left;"> <input type="text" name="captcha" class="form-control" placeholder="验证码" /> </div> <span class="input-group-btn" style="padding:0;border:none;"> <a href="javascript:;" class="btn btn-primary btn-captcha cursorPointer" style="background: #2080F8; border-radius: 4px; color: #fff; padding: 12px; position: absolute;" data-url="/api/ems/send.html" data-type="email" data-event="resetpwd">发送验证码</a> </span> </div> <input type="password" class="form-control" id="newpassword" name="newpassword" value="" placeholder="请输入6-18位密码"> <div class="loginBtn mt25"> <button type="submit">重置密码</button> </div> </form> </div> </div> </div> </div> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script> </body> </html>