添加用户
1>创建userinfo_add.jsp,添加用户页面
注意form表单中要提交的控件,name要与对应类的属性一致.
2>UserInfoController中添加点击按钮后跳转到页面，因为页面有安全性(web-inf下)
@RequestMapping("user/loadadd.do")
public String loadadd(){
return "userinfo/userinfo_add";
}
3>在userinfo_list.jsp页面中在添加用户的按钮中
href="user/loadadd.do" target="_blank" rel="external nofollow"
4>UserInfoDAO.java 添加add方法
/**
* 添加用户
* @param user
* @return
* 返回的int为影响的行数
*/
public int add(UserInfo user);
5>UserInfoDAO.xml 添加sql注册
<insert id="add" parameterType="UserInfo">
insert into user_info(user_name,user_sex,user_phone,user_pw,user_type)
values(#{userName},#{userSex},#{userPhone},#{userPw},#{userType})
</insert>
6>IUserInfoService添加
/**
* 添加用户
* @param user
*/
public void addUser(UserInfo user);
7>相应的UserInfoServiceImpl添加
@Autowired
private UserInfoDAO userdao;
public void addUser(UserInfo user){
int i = userdao.add(user);
System.out.println(i);
}
8>UserInfoController中添加（需要用model返回添加成功等提示信息,并且添加成功后跳转到提示页面）
/**
* 添加用户
* @param user
* @param model
* @return
*/
@RequestMapping("user/add.do")
public String add(UserInfo user,Model model){
//提示信息
String info = "操作失败";
try {
userservice.addUser(user);
info="操作成功!";
} catch (Exception e) {
e.printStackTrace();
}
//把提示信息传入到提示界面
model.addAttribute("info",info);
return "userinfo/userinfo_info";
}
9>提示页面userinfo_info.jsp
<head>
<base href="<%=basePath%>" target="_blank" rel="external nofollow" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-
8">
<title>Insert title here</title>
<script type="text/javascript">
alert('${info}');
window.location="<%=basePath%>user/list.do";
</script>
</head>
提示(错误/成功)信息，并且跳转到用户列表页面
10>但是表单必填项为空的也能提交
表单验证工具:nice Validate
引入对应的汉化文件js文件和css样式文件
官网查看用法
11>手机号码的异步验证 ajax(添加用户时，当填了相同的手机号码，马上进行提示手机号已被占用)
根据填入的手机号码做查询
1）在userinfo_add.jsp，给手机号input给个id为userPhone
2) 添加js：（jquery api）
$(this).val()取得当前文本框的值
blur:关注移出文本框事件
<script type="text/javascript">
$(function(){
$("#userPhone").blur(function(){
//ajax
//四个参数，第一个为url请求路径
//第二个为传递参数
//第三个为发送成功时回调函数
//第四个为返回内容格式
$.post('',
{userPhone:userPhone},function(){},"json");
});
});
</script>
3)后台编写接受方法UserInfoController
/**
* 手机号码验证
* @param user
* @return
*/
@RequestMapping("user/userajax.do")
public @ResponseBody UserInfo userAjax(UserInfo user){//
这里返回的是具体数据不是页面，所以使用标签@ResponseBody
System.out.println(user);
if(user!=null){
user.setUserName("w我是");
}
return user;
}
@ResponseBody:可以将字符串、数组、map、对象等直接转成json 格式
先进行syso打印测试
4)因为这里要 从请求和响应读取/编写字符串 并且 将对象转 化为json格式 ，所以要在springmvc_back.xml中作如下配置:
<!-- 从请求和响应读取/编写字符串 -->
<bean id="stringHttpMessage"
class="org.springframework.http.converter.StringHttpMessageConver
ter">
<property name="supportedMediaTypes">
<list>
<value>text/plain;charset=UTF-
8</value>
</list>
</property>
</bean>
<!-- 用于将对象转化为JSON -->
<bean id="jsonConverter"
class="org.springframework.http.converter.json.MappingJacksonHttp
MessageConverter"></bean>
<bean
class="org.springframework.web.servlet.mvc.annotation.AnnotationM
ethodHandlerAdapter">
<property name="messageConverters">
<list>
<ref bean="stringHttpMessage" />
<ref bean="jsonConverter" />
</list>
</property>
</bean>
5)UserInfoDAO编写根据手机号码查询方法
/**
* 根据条件查询用户信息
* @param user
* @return
*/
public UserInfo getUserInfo(UserInfo user);
6)相应的，UserInfoDAO.xml配置文件中注册sql
<select id="getUserInfo" parameterType="UserInfo" resultMap="usermap">
select * from user_info
<where>
<if test="userId != null and userId != ''">
and user_id=#{userId}
</if>
<if test="userPhone != null and userPhone != ''">
and user_phone=#{userPhone}
</if>
</where>
</select>
7)对应的service层和impl层添加对应方法
8)UserInfoControiller对返回结果进行处理，并返回信息
/**
* 手机号码验证
* @param user
* @return
*/
@RequestMapping("user/userajax.do")
public @ResponseBody String userAjax(UserInfo user){//这里返回的是具体数据不是页面，所以使用标签@ResponseBody
//后台根据前台ajax提交的数据进行查询后的结果
UserInfo puser = userservice.getUserInfo(user);
if (puser != null) {
return "该手机号码已经存在，请重新输入!";
}else{
return "恭喜你!该手机号可以使用";
}
}
9)userinfo_add.jsp:
账号信息 <span id="errorinfo" style="color: red; margin-left: 50px"></span>
<!-- ajax验证手机号 -->
<script type="text/javascript">
$(function(){
$("#userPhone").blur(function(){
//ajax
$.post('user/userajax.do',{userPhone:
$(this).val()},function(user){
$("#errorinfo").html(str);
},"json");
});
});
</script>
![PHP基础入门，简单实现前端后端交互<?php?>、echo变量及区分单双引号创建数组、echo、print_r()、var_dump()区别二维数组常见数据类型及调用函数自定义函数http协议常用请求方式及在php中的用法网页和服务器简单交互案例[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)