前端弹窗中配置邮箱,邮箱输入框可以动态的增加和删除,点击保存,对输入的多个邮箱进行保存,保存成功后在弹窗中回显邮箱信息,并且后台怎么接收配置的邮箱,通过easyui和ssm实现,前后端具体代码设计
时间: 2024-03-16 11:47:55 浏览: 118
首先,在前端页面中,可以使用HTML和JavaScript来实现邮箱输入框的动态增加和删除,具体实现方法如下:
HTML代码:
```html
<div id="email-inputs">
<input type="email" name="emails[]" placeholder="请输入邮箱地址" required>
<button type="button" class="add-email-btn">添加</button>
</div>
```
JavaScript代码:
```javascript
$(document).ready(function() {
// 添加邮箱输入框
$('.add-email-btn').on('click', function() {
var emailInput = '<input type="email" name="emails[]" placeholder="请输入邮箱地址" required>';
var removeBtn = '<button type="button" class="remove-email-btn">删除</button>';
var emailDiv = $('<div>').addClass('email-input').append(emailInput, removeBtn);
$('#email-inputs').append(emailDiv);
});
// 删除邮箱输入框
$('#email-inputs').on('click', '.remove-email-btn', function() {
$(this).closest('.email-input').remove();
});
});
```
然后,在保存按钮的点击事件中,我们可以通过JavaScript获取所有的邮箱地址,并通过Ajax请求将数据发送到后台进行保存,具体实现代码如下:
```javascript
$('#save-btn').on('click', function() {
var emails = [];
$('input[name="emails[]"]').each(function() {
emails.push($(this).val());
});
$.ajax({
url: '/saveEmails',
type: 'POST',
data: { emails: emails },
success: function(response) {
// 显示保存成功信息
alert('保存成功!');
// 回显邮箱信息
var emailList = $('<ul>');
$.each(response.emails, function(index, email) {
var emailItem = $('<li>').text(email);
emailList.append(emailItem);
});
$('#email-list').html(emailList);
},
error: function() {
alert('保存失败!');
}
});
});
```
在后台接收数据的部分,我们可以使用Spring MVC框架来实现,具体实现方法如下:
```java
@Controller
public class EmailController {
@Autowired
private EmailService emailService;
@RequestMapping(value = "/saveEmails", method = RequestMethod.POST)
@ResponseBody
public Map<String, Object> saveEmails(@RequestParam("emails[]") List<String> emails) {
// 保存邮箱地址
emailService.saveEmails(emails);
// 返回保存的邮箱地址
Map<String, Object> response = new HashMap<>();
response.put("emails", emails);
return response;
}
}
```
在上述代码中,我们使用了@RequestParam注解来获取前端发送的数据,使用@ResponseBody注解将方法的返回值转换为JSON格式的数据,这样就可以将数据传回前端。
阅读全文