页面使用:
项目中添加jstl-1.2.jar包。
页面头进行引入:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="itheima" uri="http://itcast.cn/common/"%>
(1)需要在页面上显示的数据是来自于Controller的
第一种方式:
ModelAndView mav = new ModelAndView();
mav.addObject("itemList",list);
mav.setViewName("itemList");
第二种方式:用默认的Model参数
@RequestMapping(value="/test.action")
public String get(Model model){
model.addAttribute("test1","test1" );
model.addAttribute("test2","test2" );
model.addAttribute("test3","test3" );
return "editItem";
}
页面显示:
<h3>${test1}</h3>
<h3>${test2}</h3>
<h3>${test3}</h3>
页面中使用异步请求ajax/json:
(1)导包
json支持:
js文件支持:
页面head中添加引入:
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.4.4.min.js">
</script>
头:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
(1)Jquery的异步post提交
<head>
<script type="text/javascript">
function deleteCustomer() {
var id=$("#edit_cust_id").val();
$.post("<%=basePath%>delete.action",{"id":id},function(data){//post提交,成功之后回掉显示信息,Controller返回的必需是json格式的数据
alert("客户删除更新成功!");
});
}
</script>
</head>
id的值:<input type="text" id="edit_cust_id" name="id"/>
<a href="#" class="btn" οnclick="deleteCustomer()">删除</a>//调用方法
Controller页面:
@RequestMapping(value="/delete.action")
@ResponseBody
public String get(Integer id){
return "OK";//post异步提交的方式,返回的必需是OK串,并且异步post,Controller返回的都必须是json格式的串
}
(2)表单序列化post异步提交
页面:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<script type="text/javascript">
function updateCustomer() {
$.post("<%=basePath%>update.action",$("#edit_customer_form").serialize(),function(data){//表单序列化提交
alert("客户信息更新成功!");
});
}
</script>
</head>
<form id="edit_customer_form" class="" >
<table width="100%" border=1>
<tr>
<td>商品名称</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td>商品价格</td>
<td><input type="text" name="price" /></td>
<tr>
<td>商品简介</td>
<td><textarea rows="3" cols="30" name="detail"></textarea>
</td>
</tr>
</table>
</form>
<button type="button" class="btn" οnclick="updateCustomer()">保存修改</button>
Controller:
@RequestMapping(value="/update.action")
@ResponseBody //post异步提交的,回掉回去的数据必需是json格式的
public String get(Items item){
System.out.println(item.getName());
return "OK";
}
(3)ajax异步get提交
页面:
<button type="button" class="btn" οnclick="editCustomer(1)">保存修改</button>
<script type="text/javascript">
function editCustomer(id) {
$.ajax({
type:"get",//get请求
url:"<%=basePath%>edit.action",
data:{"id":id},//传递的参数
success:function(data) {
alert(data.name);//回掉之后返回的是item,这里是得到item里面的name属性的值
}
});
}
</script>
Controller:
@RequestMapping(value="/edit.action")
@ResponseBody //返回的必需是json格式的数据
public Items get(Integer id){
Items item = new Items();
item.setName("ok1");
item.setPrice(12f);
return item;
}
(1)请求url,方法中携带参数
<a href="#" class="btn" οnclick="deleteCustomer(${row.cust_id})">删除</a>
<script type="text/javascript">
function deleteCustomer(id) {
</script>