如何将 json 数据从我的 jsp 页面发送到 spring rest 控制器
Posted
技术标签:
【中文标题】如何将 json 数据从我的 jsp 页面发送到 spring rest 控制器【英文标题】：How can I send json data from my jsp page to a spring rest controller 【发布时间】：2019-10-20 10:07:08 【问题描述】：我正在尝试从 jsp 页面发送数据，其中包括 datetime、zoneid、具有值的选中复选框和具有空值的未选中复选框。
我将所有这些作为 json 发送到我的 spring rest 控制器但是当我在调试模式下打开时，我发现控制器只收到了两个数据（我单击并提交输入值的复选框之一）。我不知道所有其他数据在哪里丢失。
另外，当我通过邮递员发送数据时，一切正常，但不知道为什么我无法从 jsp 页面发送数据。
此外，我最初在控制器中使用 @RequestBody 来获取 pojo 类对象类型数据，但它给出了内容类型不受支持的错误，因此我将 @RequestBody 替换为 @RequestParam，现在使用地图类型数据。现在那个错误没有出现，但我仍然不明白为什么它会出错。
jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<!-- Static content -->
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="/resources/css/style.css">
<script type="text/javascript" src="/resources/js/app.js"></script>
</head>
<body>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id = "schedulejob" action="scheduleJob" method="POST">
<label>
<input type="checkbox" id = "corporateClientCare" name="corporateClientCare" value="corporateClientCare" class="input_checkbox"> CorporateClientCare
</label>
<label>
<input type="checkbox" id = "dayforce" name="dayforce" value="dayforce" class="input_checkbox"> Dayforce </label>
<label>
<input type="checkbox" id = "tss" name="tss" value="tss" class="input_checkbox"> TSS </label>
<label>
<input type="checkbox" id = "multimax" name="multimax" value="multimax" class="input_checkbox"> Multimax</label>
<label> <input type="checkbox" id = "arcot" name="arcot" value="arcot" class="input_checkbox"> Arcot <br/></label>
<input type="datetime-local" id="dateTime" name = "dateTime" value="2019-06-04T15:25:33">
<input type="submit" name="Scheduler" value="Scheduler" class="submit"/></form>
<script>
jQuery(document).ready(function($)
$("#schedulejob").submit(function()
var scheduleRequest = ;
scheduleRequest["corporateClientCare"] = verifychecked("corporateClientCare");
scheduleRequest["dayforce"] = verifychecked("dayforce");
scheduleRequest["tss"] = verifychecked("tss");
scheduleRequest["multimax"] = verifychecked("multimax");
scheduleRequest["arcot"] = verifychecked("arcot");
scheduleRequest["dateTime"] = document.getElementById("dateTime").value;
scheduleRequest["timeZone"] = "Asia/Kolkata";
$.ajax(
type : form.attr('method'),
contentType : "application/json;charset=utf-8",
url : form.attr('action'),
data : JSON.stringify(scheduleRequest),
dataType : 'json',
success : function(data)
);
);
function verifychecked(value)
var varr = '';
if(document.getElementById(value).checked)
varr = value;
else
varr = null;
return varr;
);
</script>
</body>
</html>
controller
@Autowired
private Scheduler scheduler;
@PostMapping("/scheduleJob")
public ResponseEntity<ScheduleResponse> scheduleJobs(@RequestBody ScheduleRequest scheduleRequest)
try
System.out.println("___________IN CONTROLLER__________");
System.out.println("--------------zone-----------");
ZonedDateTime dateTime = ZonedDateTime.of(scheduleRequest.getDateTime(), scheduleRequest.getTimeZone());
System.out.println("--------------date is-----------" + dateTime);
System.out.println("dateTime is " + dateTime);
if(dateTime.isBefore(ZonedDateTime.now()))
ScheduleResponse scheduleResponse = new ScheduleResponse(false,
"dateTime must be after current time");
System.out.println("--------------1-------------------");
return ResponseEntity.badRequest().body(scheduleResponse);
//rest code
我没有得到数据。当我在调试模式下检查时，我发现我的 mao 只有 2 个密钥，我不明白为什么它没有捕获租金数据。
【问题讨论】：
验证变量 scheduleRequest 在 jquery 中转换为 json 时是否具有所有数据集。还要使用 @ResponseBody 而不是 RequestParam，因为您将数据设置为请求的请求正文。当参数应作为请求 url 的一部分时使用请求参数 我只使用'@RequestBody'。当我从邮递员发送请求时，一切正常。我是 UI 新手，所以还没有发现错误，但发现脚本根本不起作用。当表单提交时，只有表单数据正在使用@requestparam 时我没有收到错误，因为请求正在通过标头。无法弄清楚为什么控件根本不会编写脚本。此外，当尝试通过表单正常发送数据时，表单中的 datetime-local 值正在发送空值。为什么它发送空值而不是输入日期时间值。 【参考方案1】：在您的情况下，由于您在表单中提供了操作和方法参数，并且由于您在表单上有一个提交按钮，因此在单击提交按钮时，会触发 POST 请求，并且此请求的内容类型将为application/x-www-form-urlencoded 默认情况下。所以，如果你想把它改成 json ，你必须使用 enctype 这个属性，比如：
<form method="post" enctype="multipart/form-data">
但不幸的是，HTML 无法从表单数据生成 JSON。 如果你真的想从客户端处理它，那么你将不得不求助于使用 JavaScript
所以你必须首先禁用html表单提交然后收集数据并使用jquery ajax做一个内容类型设置为application/json的post请求。
尝试以下 jquery 来触发 jquery 表单提交：
$("#schedulejob").on('submit',function( event )
event.preventDefault();
var scheduleRequest = ;
scheduleRequest["corporateClientCare"] = verifychecked("corporateClientCare");
scheduleRequest["dayforce"] = verifychecked("dayforce");
scheduleRequest["tss"] = verifychecked("tss");
scheduleRequest["multimax"] = verifychecked("multimax");
scheduleRequest["arcot"] = verifychecked("arcot");
scheduleRequest["dateTime"] = document.getElementById("dateTime").value;
scheduleRequest["timeZone"] = "Asia/Kolkata";
$.ajax(
type : form.attr('method'),
contentType : "application/json;charset=utf-8",
url : form.attr('action'),
data : JSON.stringify(scheduleRequest),
dataType : 'json',
success : function(data)
);
);
function verifychecked(value)
var varr = '';
if(document.getElementById(value).checked)
varr = value;
else
varr = null;
return varr;
);
);
在您的代码中，您没有将“事件”传递给函数。根据 jquery 文档，您应该这样做：参考link
或者不使用输入类型提交按钮，而是使用以下：
<button type="button" id="submitBtn">Submit Form</button>
$(document).ready(function()
$("#submitBtn").click(function()
// Submit the form using jquery like above
);
);
【讨论】：
我得到同样的错误..它提交表单数据而不是脚本：| @charchitashukla 我在您的代码中看到的问题是您忘记调用 event.preventDefault() 以防止发生默认表单提交，并且您没有将事件对象传递给函数。提交（） jquery api 文档。您可以尝试使用我在答案中提供的代码吗？已使用 jquery .on() 对其进行了更新，如果您选择两者相同，则可以使用 .submit() 不支持内容类型'multipart/form-data;boundary=----WebKitFormBoundarymg9mfSGVxu5ndexw;charset=UTF-8' 默认表单提交是否仍然被触发？即使在调用 preventDefault() 之后？ 是的，默认表单提交仍在触发以上是关于如何将 json 数据从我的 jsp 页面发送到 spring rest 控制器的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 AJAX 将 JSON 数据发送到 ASP 服务器？
如何将 JSON 对象从快递服务器发送到下一个 js 页面？