在jquery中ajax的调用已经非常方便了。也提供了一些新的调用方式。
这里有两个 在jsp中局部刷新页面 的例子。
一种是json返回内容再拼接 html
一种是直接返回 一个jsp 到另一个jsp中
这里的框架用的是springMVC
其它框架 类推
json返回内容再拼接 html
index.jsp页面
<div id="showdiv">
</div>
</body>
<script type="text/javascript">
function jsonhtml() {
var successUUID = function(data){
if(data.data.detailOk=='ok'){
document.getElementById("showdiv").innerHTML =data.data.content;
}
};
$.ajax({
dataType: "json",
url: "showcontentjson",
success: successUUID,
cache:false
});
}
</script>IndexController.java
public class IndexController {
@RequestMapping("/showcontentjson")
@ResponseBody
public Object contentjson() {
JSONObject json = new JSONObject();
json.put("content", "局部刷新返回json后拼凑html");
String detailOk = "ok";
json.put("detailOk", detailOk);
return JSONResult.success(json);
}
}
直接返回一个jsp到另一个jsp中
index.jsp
<div id="showdiv">
</div>
</body>
<script type="text/javascript">
function allhtml() {
document.getElementById("showdiv").innerHTML ="";
$.ajax({
type: 'post', //可选get
url: 'showcontent', //这里是接收数据的程序
data: 'data=2', //传给后台的数据，多个参数用&连接
dataType: 'html', //服务器返回的数据类型 可选XML ,Json jsonp script html text等
success: function(msg) {
//这里是ajax提交成功后，程序返回的数据处理函数。msg是返回的数据，数据类型在dataType参数里定义！
document.getElementById("showdiv").innerHTML = msg;
//$("#duoduo").innerHTML = msg;
},
error: function() {
alert('对不起失败了');
}
})
}
</script>
content.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'content.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>${content}
</body>
</html>
IndexController.java
public class IndexController {
@RequestMapping("/showcontent")
public String content(Model model)
throws IOException {
model.addAttribute("content", "局部刷新返回整个页面");
return "/content";
}
@RequestMapping("/")
public String index(Model model)
throws IOException {
return "/index";
}
完整例子
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="<%=basePath%>/res/plugin/jquery.min.js"></script></head>
<body >
我是index页面
<input type="button" οnclick="allhtml()" value="整页返回">
<input type="button" οnclick="jsonhtml()" value="json返回">
<div id="showdiv">
</div>
</body>
<script type="text/javascript">
function allhtml() {
document.getElementById("showdiv").innerHTML ="";
$.ajax({
type: 'post', //可选get
url: 'showcontent', //这里是接收数据的程序
data: 'data=2', //传给后台的数据，多个参数用&连接
dataType: 'html', //服务器返回的数据类型 可选XML ,Json jsonp script html text等
success: function(msg) {
//这里是ajax提交成功后，程序返回的数据处理函数。msg是返回的数据，数据类型在dataType参数里定义！
document.getElementById("showdiv").innerHTML = msg;
//$("#duoduo").innerHTML = msg;
},
error: function() {
alert('对不起失败了');
}
})
}
function jsonhtml() {
var successUUID = function(data){
if(data.data.detailOk=='ok'){
document.getElementById("showdiv").innerHTML =data.data.content;
}
};
$.ajax({
dataType: "json",
url: "showcontentjson",
success: successUUID,
cache:false
});
}
</script>
</html>content.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'content.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>${content}
</body>
</html>
IndexController.java
package com.mofang.web.controller;
import java.io.IOException;
import org.apache.shiro.SecurityUtils;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSONObject;
import com.mofang.web.message.response.JSONResult;
/**
* IndexController
*
*
*/
@Controller
public class IndexController {
@RequestMapping("/showcontentjson")
@ResponseBody
public Object contentjson() {
JSONObject json = new JSONObject();
json.put("content", "局部刷新返回json后拼凑html");
String detailOk = "ok";
json.put("detailOk", detailOk);
return JSONResult.success(json);
}
@RequestMapping("/showcontent")
public String content(Model model)
throws IOException {
model.addAttribute("content", "局部刷新返回整个页面");
return "/content";
}
@RequestMapping("/")
public String index(Model model)
throws IOException {
return "/index";
}
}
结果图
例子下载
springMVC框架
