ssm利用ajax提交from表单

之前了解过ajax，但是不是很深入，之前使用的ajax都是servert里边。最近学习ssm还没有使用到ajax，于是尝试写了一下ajax，在这里与小白一起分享一下。这是实现的是利用ajax提交表单。
1、准备工作
引入jquery、josn相关的jar包，配置springmvc（在这里你大概知道要做这些工作，接下来会一一的实现）
我将用到的jquery和josn的jar包放在网盘，有需要的根据链接进行下载。
链接：https://pan.baidu.com/s/1IB2e4DSOmZ-h6gcLjSP2NQ
提取码：o7e7
2、创建表和实体类
（1）数据库的表
在这里插入图片描述
（2）对应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、mapper
（1）mapper,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)对应的接口

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）接口

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）接口的实现

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、对应的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、写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>

这句一定需要写 //一定引入对应的jquery

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

写对应的js代码

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

注意：
还是开头啰嗦的，jquery一定引入，因为我们是使用jquery操作的ajax
一定配置springmvc（配置josn）
添加对应的jar包
承接毕业设计：微信小程序、ssm和树莓派硬件
有开发好的毕业设计可直接购买，价格便宜。
扫描下面二维码加微信（非诚勿扰）：
在这里插入图片描述

小白XBIT

发布了33 篇原创文章 · 获赞 14 · 访问量 1万+

私信关注

ssm利用ajax提交from表单

猜你喜欢