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"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%>">
<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>