Vue框架依靠以下几个关键因素：1、双向数据绑定、2、组件化开发、3、虚拟DOM、4、指令系统、5、渐进式架构。这些特征使得Vue成为一个高效、灵活且易......
2024-11-15 106
bootstrap中springmvc ajax验证数据的唯一性
来源：互联网
2023-03-17 00:18:21 版权归原作者所有，如有侵权，请联系我们
bootstrap中使用springmvc验证表单数据的唯一性
工具/原料
- springmvc
- bootstrap
方法/步骤
给文件输入框添加onchange事件:
$("#empName_add_input").change(function() {
);
给bootstrap文本框发送ajax请求校验用户名是否可用：
$("#empName_add_input").change(function() {
var empName = this.value;
$.ajax({
url:"${APP_PATH}/checkUser",
type:"post",
data:"empName=" empName,
success:function(result) {
if(result.code=="100") {
show_validate_msg("#empName_add_input", "success", "用户名可用");
}else {
show_validate_msg("#empName_add_input", "error", "用户名不可用");
}
}
});
});
业务逻辑层EmployeeService方法实现如下：
package com.gwolf.crud.service;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.gwolf.crud.bean.Employee;
import com.gwolf.crud.bean.EmployeeExample;
import com.gwolf.crud.bean.EmployeeExample.Criteria;
import com.gwolf.crud.dao.EmployeeMapper;
@Service
public class EmployeeService {
@Autowired
EmployeeMapper employeeMapper;
public ListEmployee> getAll() {
return this.employeeMapper.selectByExample(null);
}
public void saveEmployee(Employee employee) {
this.employeeMapper.insertSelective(employee);
}
public boolean checkUser(String empName) {
EmployeeExample example = new EmployeeExample();
Criteria criteria = example.createCriteria();
criteria.andEmpNameEqualTo(empName);
long count = employeeMapper.countByExample(example);
return count == 0;
}
}
springmvc中控制层的实现如下：
@Controller
public class EmployeeController {
@Autowired
EmployeeService employeeService;
/*
@RequestMapping("/emps")
public String getEmps(@RequestParam(value="pn",defaultValue="1") Integer pn,Model model) {
PageHelper.startPage(pn, 5);
ListEmployee> employees = this.employeeService.getAll();
//传入连续显示的页数
PageInfoEmployee> pageInfo = new PageInfoEmployee>(employees,5);
model.addAttribute("pageInfo",pageInfo);
return "list";
}*/
@RequestMapping("/emps")
@ResponseBody
public Msg getEmpsWithJson(@RequestParam(value="pn",defaultValue="1") Integer pn,Model model) {
PageHelper.startPage(pn, 5);
ListEmployee> employees = this.employeeService.getAll();
//传入连续显示的页数
PageInfoEmployee> pageInfo = new PageInfoEmployee>(employees,5);
return Msg.success().add("pageInfo", pageInfo);
}
/**
* 员工保存
* @return
*/
@ResponseBody
@RequestMapping(value="/emp",method=RequestMethod.POST)
public Msg saveEmp(Employee employee) {
this.employeeService.saveEmployee(employee);
return Msg.success();
}
@RequestMapping("/checkUser")
@ResponseBody
public Msg checkeUser(@RequestParam("empName") String empName) {
boolean check = this.employeeService.checkUser(empName);
if(check) {
return Msg.success();
}else {
return Msg.fail();
}
}
}
用户名验证之后给保存按钮加上一个自定义的属性：
在验证方法中加上用户名是否校验成功的判断、
$("#emp_save_btn").click(function() {
if(!validate_add_form()) {
return false;
}
if($(this).attr("ajax-va")=="error") {
return false;
}
$.ajax({
url:"${APP_PATH}/emp",
type:"post",
data:$("#empModal form").serialize(),
success:function(result) {
$("#empModal").modal('hide');
//发送ajax请求发送最后一页的数据
to_page(totalRecord);
}
});
});
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： 编程语言
相关文章
- 详细阅读
-
VUE可以作什么-vue可以用来开发微信小程序么详细阅读
Vue.js 是一个流行的前端框架，普遍用于构建用户界面和单页面应用（SPA）。1、Vue 可以用于创建动态网页和交互式用户界面；2、Vue 可以用于开发单页面应用......
2024-11-15 21
-
vue文件装什么-vue filesaver详细阅读
在Vue文件中，通常会装载以下几种内容：1、模板（Template），2、脚本（Script），3、样式（Style）。模板定义了组件的结构和布局，脚本包含组件的逻辑和数据处理，样式用......
2024-11-15 94