jquery通過ajax在jsp中區域性重新整理頁面
阿新 • • 發佈：2019-01-05
在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";
}
}
