用 ajax 响应数据替换部分视图
Posted
技术标签:
【中文标题】用 ajax 响应数据替换部分视图【英文标题】：Replace partial view with ajax response data 【发布时间】：2019-05-05 21:59:24 【问题描述】：我有两个视图 - adminPage.jsp 和 studentForm.jsp。
在adminPage 中，我有一个按钮，允许用户从中打开学生（使用 ajax 获取 studentForm）。用户可以在此表格中输入学生数据，然后单击注册按钮将学生添加到数据库中。
此操作执行成功，但我有一个问题。从studentForm.jsp 调用发布请求（在数据库中添加学生的请求），结果也会在其中收到。我想用新的studentForm 替换现有的studentForm（在发布请求后收到响应），但结果，我将整个页面替换为studentForm。
我应该改变什么？
这是 adminPage，我在这里发出 get 请求并将响应加载到 div 元素中，id - viewContainer:
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function onk()
$.get(
url: "/student/studentForm",
success: function (result)
$('#viewContainer').html(result);
);
</script>
</head>
<body>
<h4>Username: $user.username</h4>
<h1>heading 1</h1>
<p> paragraph 1</p>
<p> paragraph 2</p>
<input type="button" id="userAddLoader" value="Add Student" onclick="onk();"/>
<div id="viewContainer" style="background-color: red">
<!-- this is container -->
</div>
</body>
</html>
这是studentForm.jsp：
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('#form1').onsubmit(function (e)
var form = $('#form1');
$.post(
url: form.attr("action"),
data: form,
success: function (data)
$('#viewContainer').html(data);
);
e.preventDefault(); //avoid to execute the actual submit of the form
);
</script>
</head>
<body>
<c:set var="stat" scope="request" value="$status"/>
<c:if test="$stat == 'success'">
<script>
alert("Student was successfully added");
</script>
</c:if>
<h6>New Student Registration</h6>
<form:form action="/student/postStudent" method="post" modelAttribute="user" id="form1">
Username: <form:input type="text" path="username" id="username"/>
Password: <form:input type="text" path="password" id="password"/>
<input type="submit" value="Register">
</form:form>
</body>
</html>
【问题讨论】：
检查您的 servlet 是否定义了重定向。onSubmit 不是有效的 jquery 事件，请改用 submit。
submit 似乎已被弃用，它也没有提交表单。我正在使用默认配置的 spring-boot
然后使用按钮点击事件列表器提交表单
【参考方案1】：
我替换了这个：
$('#form1').onsubmit(function (e)
var form = $('#form1');
$.post(
url: form.attr("action"),
data: form,
success: function (data)
$('#viewContainer').html(data);
);
e.preventDefault(); //avoid to execute the actual submit of the form
);
用这个：
$('#form1').on("submit", function (e)
var form = $('#form1');
$.post(
url: form.attr("action"),
data: form.serialize(),
success: function (data)
$('#viewContainer').html(data);
);
e.preventDefault();
);
问题解决了。
结论：
onSubmit 在这种情况下不起作用。可以使用 submit，但 Jquery 文档中描述的较新方法是 on("submit", function (e) ...
表单应该被序列化form.serialize()
【讨论】：
以上是关于用 ajax 响应数据替换部分视图的主要内容，如果未能解决你的问题，请参考以下文章
如何从MVC5中的jquery ajax调用中获取部分视图和JSON数据？
将视图渲染到 ExpressJS 中的变量中（用于 AJAX 响应）