前端这样提交document.forms[0].target="form1"; document.getElementById("isUpdateFlag").value='2'; var fm = document.forms[0]; var date=$('input[name="quotationDate"]').val(); fm.action = "saveInquireInfoDetail.do?operationType=save"ationDate="+date; fm.submit();后端这样返回页面 return new ModelAndView(getFormView(),model);怎么让前端不新打开一个页面而是在原来的页面上跳转
时间: 2024-03-01 21:53:47 浏览: 79
JavaScript中document.forms[0]与getElementByName区别
可以在前端的表单提交之前,使用 Ajax 异步提交表单数据,然后在 Ajax 回调函数中更新页面内容。这样就不会新打开一个页面而是在原来的页面上跳转了。具体的实现方法可以参考以下步骤:
1. 给表单添加一个提交事件监听器:
```javascript
var fm = document.forms[0];
fm.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认行为
var data = new FormData(fm); // 获取表单数据
var xhr = new XMLHttpRequest(); // 创建 Ajax 对象
xhr.open('POST', fm.action); // 设置请求方法和 URL
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 设置请求头
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 处理成功响应
var response = xhr.responseText;
// 更新页面内容
// ...
}
};
xhr.send(data); // 发送请求
});
```
2. 在后端返回 JSON 格式的数据,包含需要更新的页面内容。
3. 在 Ajax 回调函数中解析返回的 JSON 数据,并更新页面内容。具体的更新方法可以根据需要选择,比如使用 jQuery 的 `html()` 方法替换页面内容。
```javascript
var responseJson = JSON.parse(response);
$('#myDiv').html(responseJson.content);
```
注意:在使用 Ajax 异步提交表单时,需要特别注意跨域问题。如果服务器端和客户端不在同一个域名下,需要在服务器端设置 CORS 或使用 JSONP 等其他方法解决跨域问题。
阅读全文