web前端和后端怎么连接
- 数据网站主要分为三层
- 第一层表示层,这部分用的是html,css/javascript代码来实现,就是浏览器打开的网页
- 第二层是业务层,这一层负责处理数据,常用语言是java,jsp。处理前台传过来的数据,进行数据库操作,把结果返回给前端。
- 第三层是数据层,用来存储数据
从前端提交数据
前端提交
- 用document.getElement读取前端表格数据
- 将读取到的数据格式化为json
- 用ajax提交json数据(用post方式提交)
后端处理 - 后端通过request.getParameter(“data”)获取通过ajax提交的数据data
- 在吧数据转化为json对象,然后转化为相应的类对象
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用AJAX以JSON方式提交数据</title>
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<form >
名称:<input type="text" id="name"/><br/>
血量:<input type="text" id="hp"/><br/>
伤害: <input type="text" name="damage" id="damage"> <br>
<input type="button" value="提交" id="sender">
</form>
<script>
$('#sender').click(function(){
var name=document.getElementById('name').value; //1.从输入端获取 值
var hp=document.getElementById('hp').value;
var hero={"name":name,"hp":hp}; //2.把获取的值格式化
var url="submitServlet";
//以post方式提交ajax ,ajax直接传的是json对象,这里用stringfy转化为字符串
$.post(
url,
{"data":JSON.stringify(hero)}, //提交的数据是把上面的hero转化为json格式
function(data) {
alert("提交成功,请在Tomcat控制台查看服务端接收到的数据");
});
});
</script>
</body>
</body>
</html>
package servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import entity.Hero;
import net.sf.json.JSONObject;
public class SubmitServlet extends HttpServlet {
protected void service(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String data =request.getParameter("data"); //获取通过ajax提交的数据data
System.out.println("服务端接收到的数据是:" +data); //输出数据data
JSONObject json=JSONObject.fromObject(data); //将其转化为json对象
System.out.println("转换为JSON对象之后是:"+ json);
Hero hero = (Hero)JSONObject.toBean(json,Hero.class); //将其转化为一个Hero对象
System.out.println("转换为Hero对象之后是:"+hero);
}
}
使用@requestbody接收json字符串
<script type="text/javascript">
$(document).ready(function(){
var saveDataAry=[];
var data1={"userName":"test","address":"gz"};
var data2={"userName":"ququ","address":"gr"};
saveDataAry.push(data1);
saveDataAry.push(data2);
$.ajax({
type:"PUT",
url:"/user",
dataType:"json",
contentType:"application/json;charset=utf-8",
//转化为json字符串
data:JSON.stringify(saveData),
success:function(data){
}
});
});
</script>
后端接收
//mapping中的value就是ajax中的url,
@RequestMapping(value = "user", method = RequestMethod.PUT )
@ResponseBody
public void saveUser(@RequestBody List<User> users) {
userService.batchSave(users);
}
json对象和json字符串
- Json对象
- 对象可以通过对象.属性访问
var person = {"name":"shily","sex":"woman","age":"23"};//json对象
console.log(person);//输出{"name":"shily","sex":"woman","age":"23"}
console.log(person.name);//输出shiily
console.log(typeof person);//输出object类型
- Json字符串
var person = '{"name":"shily","sex":"woman","age":"23"}';//json字符串,外面多一层单引号
console.log(person);//输出{"name":"shily","sex":"woman","age":"23"}
console.log(person.name);//输出undefuned,无法这样访问
console.log(typeof person);//输出String类型
- json对象和json字符串相互转化
- JSON.parse()
- JSON.stringfy()
//字符串转化为json格式
var str = '{"name":"shily","sex":"woman","age":"23"}';
var strToObj = JSON.parse(str);
//json格式转化为字符串
var obj = {"name":"shily","sex":"woman","age":"23"};
var objToStr = JSON.stringfy(obj);