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

java 同时被 3 个专栏收录
267 篇文章 4 订阅
142 篇文章 1 订阅
28 篇文章 0 订阅


在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框架



  • 3
    点赞
  • 1
    评论
  • 8
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值