java前后台交互：html、js、css，在从jsp的方向看，都不过是他生成的字符串而已，在URL参数传递时，只需要把字符串拼接成你想要的就好
参数传递与iframe局部刷新
- spring mvc 配置为拦截 所有
*.do请求
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE div PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
//使用绝对地址，避免神奇的路径BUG
%>
<link rel="stylesheet" type="text/css"
href="<%=basePath%>/framework/css/bootstrap.min.css">
<script type="text/javascript"
src="<%=basePath%>/framework/js/jquery.min.js"></script>
<script type="text/javascript"
src="<%=basePath%>/framework/js/bootstrap.min.js"></script>
<title>实例</title>
<script type="text/javascript">
var path = "<%=basePath%>";
function tzPage(url) {
//alert(url);
$("#indexCon").attr("src", url);
}
function Go() {
window.location.href = path + "/query.do?id=1&name='abc'"
}
</script>
</head>
<body>
<!-- 4总参数传递方法 -->
<!--第一种：直接在URL后面加参数：-->
localhost:8080/query.do?id=1&name="abc"
<!--第二种：用超链接的方法传递参数：当点击超链接的时候，会被spring mvc query.do拦截，传递id 和name 两个参数过去-->
<a href="<%=basePath%>/query.do?id=1&name='abc'">超链接传递参数</a>
</body>
<!--第三种：通过js方法传递:用户点击这个button按钮，触发onClick事件，执行Go()方法，方法内跳转被spring mvc query.do拦截，同时传递了id，和name两个参数过去-->
<input type="button" onclick="Go()" value="通过js方法传递参数" />
<!--第四种：通过form表单传递-->
<form action="<%=basePath%>/query.do?test=${test}" method="post">
<!--注意如果method为get，action里面的连接不能带参数-->
<input type="text" name="id" value="3" /> <input type="text"
name="name" value="abc" />
<button type="submit" value="通过传递参数" />
</form>
<!-- iframe局部刷新 -->
<div class="row">
<div class="col-md-2">
<ul class="nav nav-default nav-stacked">
<li class="active"><a href='javaScript:'
onclick="tzPage('<%=basePath%>/index.do')">主页</a></li>
<li class="active"><a href='javaScript:'
onclick="tzPage('<%=basePath%>/home.do')">home</a></li>
<li class="active"><a href='javaScript:'
onclick="tzPage('<%=basePath%>/address.do')">地址</a></li>
</ul>
</div>
<div class="col-md-10">
<iframe id="indexCon" width="100%" height="600px" frameborder="0"></iframe>
</div>
</div>
</body>
</html>异步调用
<script type="text/javascript">
//bootsrap 模态框事件触发的ajax操作，常后台获得数据填入模态框
$(function() {
$('#editUser').on(
'show.bs.modal',
function(event) {
//alert(123);
var button = $(event.relatedTarget) // Button that triggered the modal
var id = button.data('id') // Extract info from data-* attributes
$('.modal-title').text('New message to ' + recipient)
$.ajax({
type : "Get",
url : path + "/user_manage/ajax.do?id=" + id,
//data : $("#userFrom").serialize(), // 方法为post时提交的表单数据
dataType : "json",
success : function(data) { // data:请求成功后后台返回的数据
//alert(path)
if (data.result == "true") {
$(".modal-body input[name='id']").val(
data.user.userId)
$(".modal-body input[name='name']").val(
data.user.name)
$(".modal-body input[name='password']").val(
data.user.password)
}
}
});
});
});
</script>
<button class="btn btn-sm btn-primary" data-toggle="modal"
data-target="#editUser" data-id="${item[0]}">
<i class="glyphicon glyphicon-pencil"></i> Edit
</button>
<!--弹出的模态框 -->
<div class="modal fade" id="editUser" tabindex="-1" role="dialog"
aria-labelledby="editUser">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="eidtUsre">修改</h4>
</div>
<div class="modal-body">
<form action="<%= basePath>/edit.do">
<div class="form-group">
<label for="id" class="control-label">id:</label> <input
type="text" class="form-control disabled id" name="id">
</div>
<div class="form-group">
<label for="name" class="control-label">name:</label> <input
type="text" class="form-control" name="name">
</div>
<div class="form-group">
<label for="password" class="control-label">password:</label> <input
type="text" class="form-control" name="password">
</div>
<div class="form-group">
<label for="role" class="control-label">role:</label> <select
class="form-control" name="role">
<option>学生</option>
<option>迎新管理员</option>
<option>校长</option>
<option>老师</option>
</select>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">save</button>
</form>
</div>
</div>
</div>
</div>
1397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
