ssm use ajax form submission from

Before looking too ajax, but not very deep, ajax prior to use are servert inside. Ssm has not been used recently to learn ajax, so try to write a little ajax, here to share it with white. This is achieved using ajax submit the form.
1, the preparatory work
to introduce jquery, josn related jar package, configure springmvc (here you probably know to do this work, the next will be 11 implementation)
I used jquery and josn jar package on the network disk, there is a need to download according to the link.
Link: https: //pan.baidu.com/s/1IB2e4DSOmZ-h6gcLjSP2NQ
extraction code: o7e7
2, create tables and entity class
table (1) of the database

(2) corresponding to the entity class de

package org.test.entity;

public class user {
	private int id;
	private String sex;
	private String name;
	private int age;
	private String card;
	private String addr;
	
	
	
	public user() {
	}
	
	
	public user(int id, String sex, String name, int age, String card, String addr) {
		
		this.id = id;
		this.sex = sex;
		this.name = name;
		this.age = age;
		this.card = card;
		this.addr = addr;
	}
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getSex() {
		return sex;
	}
	public void setSex(String sex) {
		this.sex = sex;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getCard() {
		return card;
	}
	public void setCard(String card) {
		this.card = card;
	}
	public String getAddr() {
		return addr;
	}
	public void setAddr(String addr) {
		this.addr = addr;
	}

	

}

3, folders
(1) folders, xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<!--指定映射文件的路劲 -->
<!-- namespace的值一定要和接口的路劲一致 接口就是通过namespace来寻找路劲的-->
<mapper namespace="org.test.mapper.userMapper">

<sql id="Many_Column_List">
    user.name,user.sex,user.age,user.card,user.addr
 </sql>

	<insert id="insertuser" parameterType="org.test.entity.user">
		insert into user(name,sex,age,card,addr) values(#{name},#{sex},#{age},#{card},#{addr})
	</insert>

</mapper>

(2) a corresponding interface

package org.test.mapper;

import java.util.List;

import org.test.entity.user;

public interface userMapper {
	List<user> listuser();
	void adduser(user u);
	user listone(int id);
	void updateone(user u);
	void deleteid(int id);
	List<user> list(int id);
	
	void insertuser(user us);//这是对应的insert
}

. 3,-Service
(. 1) Interface

package org.test.service;

import java.util.List;

import org.test.entity.user;

public interface UserService {
	
	public List<user> listquery();
	public void adduser(user u);
	public user listone(int id);
	public void updateone(user u);
	public void deleteid(int id);
	
	List<user> list(int id);
	
	public int insertuser(user us);//我们要使用的接口

}

(2) implementation of the interface

package org.test.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.test.entity.user;
import org.test.mapper.userMapper;
import org.test.service.UserService;

@Service
public class UserServiceImpl implements UserService {
	
	@Autowired
	public userMapper usermapper;
	
	@Override
	public List<user> listquery() {
		return usermapper.listuser();	
	}

	@Override
	public void adduser(user u) {
		
		usermapper.adduser(u);
		
	}

	@Override
	public user listone(int id) {
		// TODO Auto-generated method stub
		user userone=usermapper.listone(id);
		return userone;
	}

	@Override
	public void updateone(user u) {
		// TODO Auto-generated method stub
		usermapper.updateone(u);
	}

	@Override
	public void deleteid(int id) {
		// TODO Auto-generated method stub
		usermapper.deleteid(id);
		
	}

	@Override
	public List<user> list(int id) {
		// TODO Auto-generated method stub
		List<user> u=usermapper.list(id);
		return u;
	}

	@Override
	public int insertuser(user us) {
		// TODO Auto-generated method stub
		usermapper.insertuser(us);
		return 1;
	}
	
	
	
	
	
	

}

5, the corresponding contoolr

package org.test.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import org.test.entity.user;
import org.test.service.UserService;

@Controller
@RequestMapping("UserController")
public class UserController {
	
	@Autowired
	public UserService uservice;
@ResponseBody
	@RequestMapping("ajaxtest")
	public String ajaxtest(user us) {
		System.out.println("ajax");
		int res=uservice.insertuser(us);
		if(res==1) {
			return "101";
		}else {
			return "100";
		}
		
	}
	

6, write jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
	<head>
		<script type="text/javascript" src="js/jquery.min.js"></script>   //一定引入对应的jquery
		
		<title>添加</title>
		<base href="<%=basePath %>" />
	</head>
	<body>
	
	<form method="post"   id="ajax">	
		
		<table border="1">
			<tr>
				<td colspan="2">添加用户信息</td>
			</tr>
			
			<tr>
				<td>姓名</td>
				<td>
					<input type="text" name="name" />
				</td>
			</tr>
			
			<tr>
				<td>性别</td>
				<td>
				<input type="text" name="sex" />
				</td>
			</tr>
			<!--  <tr>
				<td>性别</td>
				<td>
					<input type="text" name="sex" />
				</td>
			</tr>-->
			<tr>
				<td>年龄</td>
				<td>
					<input type="text" name="age" />
				</td>
			</tr>	
			<tr>
				<td>身份证</td>
				<td>
					<input type="text" name="card" />
				</td>
			</tr>
			<tr>
				<td>地址</td>
				<td>
					<input type="text" name="addr" />
				</td>
			</tr>
 
			<tr>
				<td>
					<a href="UserController/listquery">返回</a>
				</td>
				<td>
					<input type="button" onclick="ajaxtest()" value="提交" />					
				</td>
			</tr>	
		</table>
		</form>
		<script type="text/javascript">
			function ajaxtest(){
				 $.ajax({
			            //几个参数需要注意一下
			                type: "POST",//方法类型
			                dataType: "json",//预期服务器返回的数据类型
			                url: "UserController/ajaxtest" ,//url
			                data: $('#ajax').serialize(),
			                success: function (result) {
			                    console.log(result);//打印服务端返回的数据(调试用)
			                    if (result==101) {
			                        alert("成功");
			                    }else{
			                    	 alert("插入失败,请重新插入");
			                    }
			                    ;
			                },
			                error : function() {
			                    alert("插入失败,请重新插入");
			                }
			            });
			        }
		</script>
	</body>
</html>
 

// necessarily need to write a certain phrase introduced corresponding jquery

<script type="text/javascript" src="js/jquery.min.js"></script>  

Write the corresponding js code

	<script type="text/javascript">
			function ajaxtest(){
				 $.ajax({
			            //几个参数需要注意一下
			                type: "POST",//方法类型
			                dataType: "json",//预期服务器返回的数据类型
			                url: "UserController/ajaxtest" ,//url
			                data: $('#ajax').serialize(),
			                success: function (result) {
			                    console.log(result);//打印服务端返回的数据(调试用)
			                    if (result==101) {
			                        alert("成功");
			                    }else{
			                    	 alert("插入失败,请重新插入");
			                    }
			                    ;
			                },
			                error : function() {
			                    alert("插入失败,请重新插入");
			                }
			            });
			        }
		</script>

Note:
still at the beginning of long-winded, jquery certainly introduced, because we are using ajax jquery operation of
certain configuration springmvc (Configuration josn)
to add the corresponding jar package
to undertake graduate design: micro-channel applets, ssm and Raspberry Pi hardware
have developed a good graduation design can buy cheaper prices.
Scanning micro-channel two-dimensional code plus the following (You Are):