前台如何将数据传到后台
Ø 同步
get请求用 ?name=xxx&age=xxxx
post 通过form表单，<input type=’text’ name=’username’ >
<inputtype=’submit’ value=’提交’>
<button type=’submit>提交
Ø 异步
<inputtype="hidden"name="method" value="register">//设置后台要执行的方法，
$(function(){ //页面加载函数
$(“#id”).click(function(){ //触发事件
var dataStr=$(“#formId”).serialize(); //将表单数据格式化
$.ajax({
type:post ，
url:${pagecontext.reqest.contextpath}/register，
data:dataStr, //{“key”:”value”,”k”:”v”} ，
dateType:“json”，
success:function(result){ alert(1);alert(result) }，
error:alert(“位置异常”),
contenType:application/json
})
})
})
2. 前台怎么校验数据
Ø 同步
Ø 异步（）
itheimacast\test_web_2\src\main\webapp\add.html
<!DOCTYPEhtml>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>添加页面~黑马程序员</title>
<link href="css/bootstrap.min.css"rel="stylesheet">
<style type="text/css">
tr{line-height: 50px;}
.jumbotron{background-color: white;}
span{color:red;}
.form-control{display:inline;}
</style>
<!--[if lt IE 9]>
<scriptsrc="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<scriptsrc="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="alertalert-info" role="alert">
<div class="container">
<h2>请输入添加商品资料</h2>
</div>
</div>
<div class="jumbotron">
<div class="container">
<form id="addProductForm">
<table align="center">
<colgroup>
<colwidth="100px">
<colwidth="500px;">
</colgroup>
<tr>
<td>
<labelfor="pname">商品名称</label>
</td>
<td>
<input type="text"style="width: 300px;" class="form-control"name="pname" id="pname" placeholder="请求输入商品名称">
<span id="pnameMsg"></span>
</td>
</tr>
<tr>
<td>
<label for="price">商品价格</label>
</td>
<td>
<inputtype="text" style="width: 300px;"class="form-control" name="price" id="price"placeholder="请输入商品价格">
<spanid="priceMsg"></span>
</td>
</tr>
<tr>
<td>
<labelfor="category">分类名称</label>
</td>
<td>
<inputtype="text" style="width: 300px;" class="form-control"id="category" name="category" placeholder="请输入商品分类名称">
<spanid="categoryMsg"></span>
</td>
</tr>
<tr>
<td>
<labelfor="desc">商品描述</label>
</td>
<td>
<textarearows="5" style="width: 300px;vertical-align:middle;"class="form-control" id="desc" name="desc"placeholder="请输入商品描述"></textarea>
<spanid="descMsg"></span>
</td>
</tr>
<tr>
<tdcolspan="2">
<buttontype="submit" class="btn btn-primary btn-lg">添加商品</button>
<spanid="msg"></span>
</td>
</tr>
</table>
</form>
</div>
</div>
<div class="alertalert-info" style="position: absolute;bottom: 0px;width:100%;margin-bottom: 0px;" role="alert">
<div class="container">
北京传智播客教育科技有限公司版权所有Copyright 2006-2018， All Rights Reserved 京ICP备08001421号 京公网安备110108007702
</div>
</div>
<scriptsrc="js/jquery-3.3.1.min.js"></script>
<scriptsrc="js/bootstrap.min.js"></script>
<scripttype="text/javascript">
function checkname(){
if (!$("#pname").val()){
$("#pnameMsg").html("名称不能为空");
return false;
}else{
$("#pnameMsg").html("");
return true;
}
}
function checkprice(){
if (!$("#price").val()){
$("#priceMsg").html("价格不能为空");
return false;
}else if(!/^[1-9]\d*(.\d+)?$/.test($("#price").val())) {
$("#priceMsg").html("价格不能小于0");
return false;
}else{
$("#priceMsg").html("");
return true;
}
}
function checkcategory(){
if (!$("#category").val()){
$("#categoryMsg").html("分类不能为空");
return false;
}else{
$("#categoryMsg").html("");
return true;
}
}
function checkdesc(){
if (!$("#desc").val()){
$("#descMsg").html("描述不能为空");
return false;
}else{
$("#descMsg").html("");
return true;
}
}
$(function () {
$("#pname").blur(checkname);
$("#price").blur(checkprice);
$("#category").blur(checkcategory);
$("#desc").blur(checkdesc);
$("#addProductForm").submit(function() {
if(checkname()&&checkprice()&&checkcategory()&&checkdesc()){
$.post("add",$(this).serialize(),function(data) {
if (data){
location.href ="success.html";
}else {
$("#msg").html("添加失败")
}
},"json");
}
return false;
})
})
</script>
</body>
</html>
ü 准备行内标签，span,显示校验后的错误信息，
ü blur触发校验函数，
ü 所有的叫哦眼都通过，才执行ajax
3. 后台怎样接收数据
Ø 同步
Ø 异步
//Stringusername=request.getParamter(“key”);
Map<String,String[]>map=request.getParamterMap(); //获取参数
BeanUtils.populate(); //封装到对象中
4. 后台如何将数据返回前台
Ø 同步
讲值保存在域对象
request.setAttribute("bbb",bbb)；
Ø 异步
Stringjson = new ObjectMapper().writeValueAsString(flag);
response.getWriter().print(json);
5. 前台怎样接收数据，显示到页面
Ø 同步
jsp页面中讲值保存在域对象，el表达式取值，jstl
request.setAttribute("bbb",bbb)；
${request.bbb}；
Ø 异步
ajax，success=function(data)
4429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
