前端弹窗中配置邮箱,邮箱输入框可以动态的增加和删除,点击保存按钮,对输入的多个邮箱进行保存,点击取消则不保存,保存成功后在弹窗中回显邮箱信息,并且后台怎么接收配置的邮箱,通过easyui和ssm实现,前后端具体代码设计

时间: 2024-03-17 17:39:54 浏览: 20
好的,这是一个比较具体的问题,需要较为详细的回答。我将分为以下几个部分进行回答: 1. 前端页面设计 前端页面应该包含一个输入框和两个按钮:增加邮箱、删除邮箱、保存、取消按钮。点击增加邮箱按钮,应该动态增加一个邮箱输入框;点击删除邮箱按钮,应该删除最后一个邮箱输入框;点击保存按钮,应该将所有输入的邮箱发送给后台进行保存;点击取消按钮,应该关闭弹窗,不保存任何数据。 具体的实现代码如下: ```html <div id="emailInput"> <input type="text" name="email" placeholder="请输入邮箱地址"/> <button type="button" onclick="addEmail()">增加邮箱</button> <button type="button" onclick="removeEmail()">删除邮箱</button> <button type="button" onclick="saveEmail()">保存</button> <button type="button" onclick="cancel()">取消</button> </div> ``` ```javascript function addEmail() { var emailInput = document.createElement('input'); emailInput.type = 'text'; emailInput.name = 'email'; emailInput.placeholder = '请输入邮箱地址'; document.getElementById('emailInput').appendChild(emailInput); } function removeEmail() { var emailInput = document.getElementsByName('email'); if (emailInput.length > 1) { emailInput[emailInput.length - 1].remove(); } } function saveEmail() { var emailInput = document.getElementsByName('email'); var emailList = []; for (var i = 0; i < emailInput.length; i++) { emailList.push(emailInput[i].value); } // 将emailList发送给后台进行保存 } function cancel() { // 关闭弹窗,不保存任何数据 } ``` 2. 后台接收数据 后台可以通过使用Spring MVC框架中的@RequestParam注解接收前端发送的数据。具体的代码如下: ```java @Controller public class EmailController { @RequestMapping(value = "/saveEmail", method = RequestMethod.POST) @ResponseBody public String saveEmail(@RequestParam("emailList") List<String> emailList) { // 执行保存操作 return "success"; } } ``` 其中,@RequestParam注解中的参数名应该与前端发送的参数名保持一致。 3. EasyUI弹窗设计 EasyUI提供了一个dialog组件,可以用来实现弹窗的功能。具体的代码如下: ```html <div id="emailDialog" class="easyui-dialog" style="width:400px;height:250px;padding:10px;" closed="true" buttons="#emailButtons"> <form id="emailForm" method="post"> <div id="emailInput"> <input type="text" name="email" placeholder="请输入邮箱地址"/> <button type="button" onclick="addEmail()">增加邮箱</button> <button type="button" onclick="removeEmail()">删除邮箱</button> </div> </form> </div> <div id="emailButtons"> <a href="#" class="easyui-linkbutton" onclick="saveEmail()">保存</a> <a href="#" class="easyui-linkbutton" onclick="cancel()">取消</a> </div> ``` ```javascript $('#emailDialog').dialog({ title: '邮箱配置', closable: true, modal: true, buttons: '#emailButtons' }); function addEmail() { var emailInput = document.createElement('input'); emailInput.type = 'text'; emailInput.name = 'email'; emailInput.placeholder = '请输入邮箱地址'; document.getElementById('emailInput').appendChild(emailInput); } function removeEmail() { var emailInput = document.getElementsByName('email'); if (emailInput.length > 1) { emailInput[emailInput.length - 1].remove(); } } function saveEmail() { $('#emailForm').form('submit', { url: '/saveEmail', onSubmit: function() { var isValid = $(this).form('validate'); if (!isValid) { $.messager.alert('提示', '请填写完整的邮箱地址', 'warning'); } return isValid; }, success: function(data) { if (data == 'success') { $.messager.alert('提示', '保存成功', 'info', function() { $('#emailDialog').dialog('close'); }); } else { $.messager.alert('提示', '保存失败', 'error'); } } }); } function cancel() { $('#emailDialog').dialog('close'); } ``` 其中,$('#emailForm').form('submit')用来将表单数据发送给后台进行保存。在发送数据前,需要进行表单验证,可以使用EasyUI中的form组件进行验证。如果数据保存成功,则弹出提示框,关闭弹窗;如果数据保存失败,则弹出提示框,保持弹窗不关闭。

相关推荐

最新推荐

recommend-type

vue实现一个6个输入框的验证码输入组件功能的实例代码

主要介绍了vue实现一个6个输入框的验证码输入组件功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
recommend-type

Python弹出输入框并获取输入值的实例

今天小编就为大家分享一篇Python弹出输入框并获取输入值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
recommend-type

微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法

主要介绍了微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法,涉及事件绑定及this.setData动态设置属性数据的相关操作技巧,需要的朋友可以参考下
recommend-type

jquery实现input输入框实时输入触发事件代码

代码如下: &lt;input id=”productName” name=”productName” class=”wid10″ type=”text” value=”” /&gt; 代码如下: //绑定商品名称联想 $(‘#productName’).bind(‘input propertychange’, function() {...
recommend-type

bootstrap 通过加减按钮实现输入框组功能

主要介绍了bootstrap 输入框组 通过加减按钮来增加删除内嵌输入框组,当我点击 + 按钮时,会添加一行输入框组;当点击 - 按钮时,会删除这一行输入框组。具体实现代码大家参考下本
recommend-type

zigbee-cluster-library-specification

最新的zigbee-cluster-library-specification说明文档。
recommend-type

管理建模和仿真的文件

管理Boualem Benatallah引用此版本:布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学,1996年。法语。NNT:电话:00345357HAL ID:电话:00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆,用于存放和传播科学研究论文,无论它们是否被公开。论文可以来自法国或国外的教学和研究机构,也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
recommend-type

实现实时数据湖架构:Kafka与Hive集成

![实现实时数据湖架构:Kafka与Hive集成](https://img-blog.csdnimg.cn/img_convert/10eb2e6972b3b6086286fc64c0b3ee41.jpeg) # 1. 实时数据湖架构概述** 实时数据湖是一种现代数据管理架构,它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同,实时数据湖不依赖于预先定义的模式,而是采用灵活的架构,可以处理各种数据类型和格式。这种架构为企业提供了以下优势: - **实时洞察:**实时数据湖允许企业访问最新的数据,从而做出更明智的决策。 - **数据民主化:**实时数据湖使各种利益相关者都可
recommend-type

spring添加xml配置文件

1. 创建一个新的Spring配置文件,例如"applicationContext.xml"。 2. 在文件头部添加XML命名空间和schema定义,如下所示: ``` <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.springframework.org/schema/beans
recommend-type

JSBSim Reference Manual

JSBSim参考手册,其中包含JSBSim简介,JSBSim配置文件xml的编写语法,编程手册以及一些应用实例等。其中有部分内容还没有写完,估计有生之年很难看到完整版了,但是内容还是很有参考价值的。