本文介绍了前端与后端通过Ajax进行GET请求数据交互，利用jdbc实现数据入库，以及SpringMVC框架处理POST提交的案例。讨论了GET与POST的区别，并展示了前端HTML表单设计及后端控制器接收数据的实现，包括处理表单数据的Student类和StudentController。在实际操作中可能遇到404和500错误，但最终实现了数据的正确提交。
一，前端后大联动
**案例：**接受浏览器发来的请求数据，解析，利用jdbc入库
–1，分析步骤
1，利用jdbc入库，设计表设计表的字段
2，编写前端的代码，利用ajax把请求参数携带着访问服务器
3，编写后端的代码，先加jar包的依赖，再利用jdbc发起insert的语句
–2，创建表
–3，创建前端网页，写ajax代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hopehouse-ajax提交数据并入库</title>
<script src="jquery-1.8.3.min.js"></script>
<script>
function c(){
$.ajax({
type:"get" ,
url: "http://localhost:8080/house/save",
data:{
"id":"200",
"name":"猛爷",
"sex":"男",
"style":"豪华版"
},
success: function(data){
alert(data);
alert(1000);
}
error: function(data){
alert("提交失败");
}
})
}
</script>
</head>
<body>
<a onclick="c();" href="#">快来点</a>
</body>
</html>
–4，创建后端程序，接受请求入库
项目结构
编写启动类
编写HopeHouse类
package cn.tedu.pojo;
public class HopeHouse {
private Integer id;
private String name;
private String sex;
private String style;
private String size;
@Override
public String toString() {
return "HopeHouse{" +
"id=" + id +
", name='" + name + '\'' +
", sex='" + sex + '\'' +
", style='" + style + '\'' +
", size='" + size + '\'' +
'}';
}
public HopeHouse(){}
public HopeHouse(Integer id, String name, String sex, String style, String size) {
this.id = id;
this.name = name;
this.sex = sex;
this.style = style;
this.size = size;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getStyle() {
return style;
}
public void setStyle(String style) {
this.style = style;
}
public String getSize() {
return size;
}
public void setSize(String size) {
this.size = size;
}
}
编写HouseController类
package cn.tedu.controller;
import cn.tedu.pojo.HopeHouse;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
@RestController//接收请求
@RequestMapping("House")
@CrossOrigin//解决跨域问题
public class HouseController {
@RequestMapping("save")
public void save(HopeHouse h) throws Exception {
Class.forName("com.mysql.jdbc.Driver");
String url="jdbc:mysql:///test2?characterEncoding=utf8";
Connection conn2 = DriverManager.getConnection(url, "root", "root");
String sql = "insert into hopehouse values(?,?,?,?,?)";
PreparedStatement ps2 = conn2.prepareStatement(sql);
ps2.setInt(1,h.getId());
ps2.setString(2,h.getName());
ps2.setString(3,h.getSex());
ps2.setString(4,h.getStyle());
ps2.setDouble(5,h.getSize());
ps2.executeUpdate();
ps2.close();
conn2.close();
System.out.println("恭喜！恭喜！");
}
}
404错误， 前端与服务器 路径设置不一
500错误，nested exception is java.lang.NullPointerException] with root cause 不可以为null ,数据库与输入值设置不一
成功：
二，SpringMVC框架解析post提交的数据
–1，get和post的区别
get的数据都是拼接的形式，在地址栏展示。相对来说不安全，长度受限
post 属性相对安全，容量比较大
**案例：**通过post方式，提交学生数据
–2，开发步骤
编写前端程序
创建studentform.html的页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学生信息注册系统2</title>
<style>
.a{/*选中网页*/
width:320px
height:100px
padding:5px
}
input[type ="button"]{
background-color: fuchsia;
color: #FFF8DC;
}
input[type ="submit"]{
height:25px ;
width: 45px;
background-color: #1E90FF;
border: 2px solid #FF8C00 ;
color: #FFF8DC;
}
</style>
</head>
<form method="post" action="http://localhost:8080/student/add">
<table>
<tr>
<td>
<h2>学生信息注册系统</h1>
</td>
</tr>
<tr>
<td>
姓名：
</td>
</tr>
<tr>
<td>
<input class="a" type="text" name="user" style= "padding:5px ;" placeholder="请输入名字"/>
</td>
</tr>
<tr>
<td>
年龄：
</td>
</tr>
<tr>
<td>
<input class="a" type="number" name="age" style= "padding:10px ;" placeholder="请输入年龄"/>
</td>
</tr>
<tr>
<td>
性别：（单选框）<input type= "radio" value =1 name="sex" checked="checked"/>男
<input type= "radio" name="sex" value="0"/>女
</td>
</tr>
<tr>
<td>爱好：（多选）
<input type = "checkbox" name="like" value = "1">/乒乓球
<input type = "checkbox" name="like" value = "2" />爬山
<input type = "checkbox" name="like" value = "3"/>唱歌
</td>
</tr>
<tr>
<td>学历：（下拉框）
<select name="edu">
<option value = "1">研究生</option>
<option value = "2">本科</option>
<option value = "3">专科</option>
</select>
</td>
</tr>
<tr>
<td>
入学日期：
</td>
</tr>
<tr>
<td>
<input type = "date" name = "intime"/>
</td>
</tr>
<tr align="center">
<td>
<input type = "submit" name = "save" value="保存" />
<input type = "button" name = "xiao" value="取消" />
</td>
</tr>
</table>
</form>
<body>
</body>
</html>
编写后端程序
创建Student类，充当了模型层
package cn.tedu.pojo;
import org.springframework.format.annotation.DateTimeFormat;
import java.util.Arrays;
import java.util.Date;
public class Student {
//类里面应该提供哪些属性---和页面中name属性的值相同
private String user;
private Integer age;
private Integer sex;
private String[] like;
private Integer edu;
@DateTimeFormat(pattern = "yyyy-MM-dd")
private Date intime;
@Override
public String toString() {
return "Student{" +
"user='" + user + '\'' +
", age=" + age +
", sex=" + sex +
", like=" + Arrays.toString(like) +
", edu=" + edu +
", intime=" + intime +
'}';
}
public Student(){}
public Student(String user, Integer age, Integer sex, String[] like, Integer edu, Date intime) {
this.user = user;
this.age = age;
this.sex = sex;
this.like = like;
this.edu = edu;
this.intime = intime;
}
public String getUser() {
return user;
}
public void setUser(String user) {
this.user = user;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public Integer getSex() {
return sex;
}
public void setSex(Integer sex) {
this.sex = sex;
}
public String[] getLike() {
return like;
}
public void setLike(String[] like) {
this.like = like;
}
public Integer getEdu() {
return edu;
}
public void setEdu(Integer edu) {
this.edu = edu;
}
public Date getIntime() {
return intime;
}
public void setIntime(Date intime) {
this.intime = intime;
}
}
创建StudentController类，充当了控制层
package cn.tedu.controller;
import cn.tedu.pojo.Student;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@RequestMapping("student")
public class StudentController {
@RequestMapping("add")//
public Student add(Student s){
System.out.println(s);
return s;
}
}
成功：
638
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
