ajax調(diào)用action后可以使action不跳轉(zhuǎn)到別的頁面库车，并且獲取到action里返回的頁面
詳情參考https://www.iteye.com/problems/86416
關(guān)鍵地方：
<script type="text/javascript">
$(document).ready(function() {
$('#demo1').click(function() {
var url="/Demo/demoPrj/IndexLogin.action";
$("#workspace").load(url,function(){
});
});
});
</script>
以下例子展示的是點(diǎn)擊一個按鈕彈出彈出框，
彈出框顯示后臺列出的各個數(shù)據(jù)組成Table
showProduct.jsp:
<a href="javascript:;" class="innerbtn" style="color:blue" data-productid="' + row.product_id + '">' + row.product_name + '</a>
<script>
$(function() {
$('.innerbtn').click(function () {
var url = "showPMproduct?productId=" + $(this).data("productid");
$(".mytable").load(url,function(){
$('.pop_box').slideDown('400');
});
});
$('.closepop').click(function () {
console.log("click2");
$('.pop_box').slideUp('400');
});
});
</script>
ProductAction.java:
public String showPM() {
HttpServletRequest request = ServletActionContext.getRequest();
String productId = request.getParameter("productId");
listProductMaterials = productMaterialService.getPMByProductId(Integer
.parseInt(productId));
return "zhanshitable";
}
struts.xml:
<action name="*product" class="productAction" method="{1}">
<result name="zhanshitable">/product/test.jsp</result>
</action>
test.jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
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 'test.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">
-->
<style>
.normTbe{border-left:1px solid #ddd;border-top:1px solid #ddd;margin: 0 auto; }
.normTbe td,.normTbe th{border-bottom: 1px solid #ddd;border-right:1px solid #ddd;padding: 15px;text-align: center;}
.normTbe input{width: 80%;text-align: center;}
.wrapper{width: 1140px;padding: 0 20px; margin: 0 auto;clear: both;}
.hide{display: none;}
.hideTr{background: #ddd;}
.pop_box{position: fixed;top: 0;left: 0;right: 0;bottom: 0;z-index: 99999;}
.pop_box .bg{background: #000;opacity: 0.7;filter:alpha(opacity=70);position: absolute;top:0;left: 0;right: 0;bottom: 0;}
.pop_box .contentP{position: relative;margin:0 auto;margin-top: 10%; background: #fff;width: 80%;}
.pop_box .PTit{height: 45px;background: #eee;}
.pop_box .PTit h3{line-height: 7px;float: left;padding-left: 15px;font-weight: normal;font-size: 16px;}
.pop_box .PTit a{display: block;width: 45px;line-height: 45px;text-align: center;background: #ddd;float: right;font-size: 20px;}
.pop_box .PTit a:hover{background: #50abfd;color: #fff;}
.pop_box .textmian{padding: 15px;}
.btn_a1{padding-top: 15px; text-align: center;}
.btn_a1 a{display: inline-block;*display: inline;*zoom: 1;width: 120px;line-height: 45px;background: #50abfd;color: #fff;}
.btn_a1 .addtr2,.btn_a1 .dtadd{background: #ff9900;}
</style>
</head>
<body>
<div class="pop_box hide">
<div class="bg"></div>
<div class="contentP">
<div class="PTit">
<h3>貨品物料信息</h3>
<a href="javascript:;" class="closepop">x</a>
</div>
<div class="textmian">
<table class="normTbe neijian" cellspacing="0" cellpadding="0" border="0" ;>
<thead>
<tr>
<th>貨品名</th>
<th>物料編號</th>
<th>物料名</th>
<th>數(shù)量</th>
</tr>
</thead>
<tbody class="tbody2">
<c:forEach items='${listProductMaterials}' var='productMaterial'>
<tr>
<td>${productMaterial.product.productName}</td>
<td>${productMaterial.material.materialNo}</td>
<td>${productMaterial.material.materialName}</td>
<td>${productMaterial.quantity}</td>
</tr>
</c:forEach>
</tbody>
</table>
<div class="btn_a1">
<a class="closepop" href="javascript:;">關(guān)閉</a>
</div>
</div>
</div>
</div>
<script src="resources/plugins/jquery.1.12.4.min.js"></script>
<script>
$('.closepop').click(function () {
console.log("click2");
$('.pop_box').slideUp('400');
});
</script>
</body>
</html>
