您的位置：首页 > Web前端 > JQuery

jquery通过ajax在jsp中局部刷新页面

2015-06-01 18:23 656 查看
在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"  onclick="allhtml()"   value="整页返回">
<input type="button"  onclick="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框架
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航