将数据从ajax发送到Spring控制器：所需的字符串参数不存在。

huangapple
go评论117阅读模式
英文:

sending data from ajax to spring controller: Required String parameter is not present

问题

我知道关于这个错误信息已经有很多问题了，但是没有什么能帮助我解决问题。

我正在尝试通过包含电子邮件、名字和姓氏以及每个条目的复选框的表格来激活用户帐户。
首先，您勾选要解锁的用户的复选框，然后按下一个按钮发送请求，控制器将只是将所选用户的“已激活”状态从0更改为1。

我有一个HTML、一个JavaScript和一个Java控制器文件。
请注意，我目前正在本地主机上尝试这个，并且已经通过在命令提示符下启动Chrome来关闭了Google Chrome的跨域访问，命令为chrome.exe --disable-web-security --allow-file-access-from-files

我想通过MainController.java中的电子邮件地址来解锁用户，该文件目前只执行sysout，因为迄今为止，由于错误，我甚至还没有进入该方法。

我已经尝试将@RequestParam更改为@RequestBody，但它只是给我一个所需的请求体缺失的错误。

所以我猜主要问题是我从表格中获取的电子邮件地址没有传递给控制器，但是我该如何正确地做呢？

表格的样子如下：
表格的屏幕截图

unlock.html

  1. <div id="background">
  2.   <div id="scroll-horizontal">
  3.     <form id="table-form" method="POST" action="http://localhost:8080/mitglied/unlockUpdate">
  4.       <table id="table">
  5.         <tr>
  6.           <th>E-Mail</th>
  7.           <th>Vorname</th>
  8.           <th>Nachname</th>
  9.           <th><input id="unlock-all" type="checkbox"></th>
  10.         </tr>
  11.        </table>
  12.        <input id="unlock-btn" type="submit" value="Freischalten"></input>
  13.       </form>
  14.     </div>
  15. </div>
  17. <script src="../static/js/unlock.js"></script>

JavaScript文件unlock.js

  1. jQuery(document).ready(function() {
  3.     $.getJSON("http://localhost:8080/mitglied/unlock", function(data) {
  4.         var table_data = "";
  5.         $.each(data, function(key, value) {
  6.             table_data += "<tr>";
  7.             table_data += "<td>" + value.email + "</td>";
  8.             table_data += "<td>" + value.vorname + "</td>";
  9.             table_data += "<td>" + value.nachname + "</td>";
  10.             table_data += "<td class="unlock-checkbox" style="text-align:center"><input type="checkbox"></input></td>";
  11.             table_data += "</tr>";
  12.         });
  14.         $("#table").append(table_data);
  15.     });
  17.     jQuery('#table-form').submit(function() {
  18.         var rows = document.getElementsByTagName("tr");
  20.         for (var i = 1; i < rows.length; i++) {
  21.             var cols = rows[i].getElementsByTagName("td");
  22.             var checkbox = cols[3].getElementsByTagName("input")[0];
  24.             if (checkbox.checked) {
  25.                 var email = cols[0].innerHTML;
  27.                 $.ajax({
  28.                     url: $(this).attr('action'),
  29.                     method: 'POST',
  30.                     data: { email: email },
  32.                     success: function(data) {
  33.                         console.log("success, email: " + email);
  34.                         alert("success");
  35.                     },
  36.                     error: function() {
  37.                         alert("error");
  38.                     }
  39.                 });
  40.             }
  41.             console.log(checkbox.checked);
  42.         }
  43.     });
  44. });

还有MainController.java

  1. @CrossOrigin
  2. @Controller
  3. @RequestMapping(path="/mitglied")
  4. public class MainController {
  5.     @Autowired
  6.     private MitgliederRepository mitgliedRepository;
  8.     @PostMapping(path="/unlockUpdate")
  9.     public @ResponseBody void unlockSelectedUsers(@RequestParam String email) {
  10.         System.out.println(email);
  11.     }
  12. }

完整的错误消息（在localhost:8080/mitglied/unlockUpdates）是：

Whitelabel错误页面
该应用程序没有显式映射到/error，因此您正在看到它作为回退。

Fri Apr 10 13:43:42 CEST 2020
发生了意外错误（类型=错误请求，状态=400）。
所需的String参数'email'不存在

英文:

I know there are already a lot questions about this error message, but nothing helped me to fix my problem.

I'm trying to activate a User account through a table which contains the email, first and last name and a checkbox for each entry.
First you check the checkboxes for which user(s) you want to unlock and then you press a button to send your request, the Controller would then just change the "activated" status from the selected user(s) from 0 for deactivated to 1 for activated.

I have a HTML, a JavaScript and a Java Controller file.
Note that I'm currently trying this on localhost and have turned of google chromes cross origin by launching Chrome per cmd with chrome.exe --disable-web-security --allow-file-access-from-files

I want to unlock the user by their email adress in the MainController.java which currently only does a sysout because so far I don't even get to that method because of the error.

I already tried changing the @RequestParam to @RequestBody but it just gives me the error Required request body is missing.

So I quess the main problem is that the email adress I'm getting from the table is not passed on to the Controller, but how do I do that correctly?

what the table looks like:
screenshot of the table

the unlock.html

  1. &lt;div id=&quot;background&quot;&gt;
  2. &lt;div id=&quot;scroll-horizontal&quot;&gt;
  3. &lt;form id=&quot;table-form&quot; method=&quot;POST&quot; action=&quot;http://localhost:8080/mitglied/unlockUpdate&quot;&gt;
  4. &lt;table id=&quot;table&quot;&gt;
  5. &lt;tr&gt;
  6. &lt;th&gt;E-Mail&lt;/th&gt;
  7. &lt;th&gt;Vorname&lt;/th&gt;
  8. &lt;th&gt;Nachname&lt;/th&gt;
  9. &lt;th&gt;&lt;input id=&quot;unlock-all&quot; type=&quot;checkbox&quot;&gt;&lt;/th&gt;
  10. &lt;/tr&gt;
  11. &lt;/table&gt;
  12. &lt;input id=&quot;unlock-btn&quot; type=&quot;submit&quot; value=&quot;Freischalten&quot;&gt;&lt;/input&gt;
  13. &lt;/form&gt;
  14. &lt;/div&gt;
  15. &lt;/div&gt;
  16. &lt;script src=&quot;../static/js/unlock.js &quot;&gt;&lt;/script&gt;

the JavaScript file unlock.js

  1. jQuery(document).ready(function() {
  2. $.getJSON(&quot;http://localhost:8080/mitglied/unlock&quot;, function(data) {
  3. var table_data = &quot;&quot;;
  4. $.each(data, function(key, value) {
  5. table_data += &quot;&lt;tr&gt;&quot;;
  6. table_data += &quot;&lt;td&gt;&quot; + value.email + &quot;&lt;/td&gt;&quot;;
  7. table_data += &quot;&lt;td&gt;&quot; + value.vorname + &quot;&lt;/td&gt;&quot;;
  8. table_data += &quot;&lt;td&gt;&quot; + value.nachname + &quot;&lt;/td&gt;&quot;;
  9. table_data += &quot;&lt;td class=&quot; + &quot;unlock-checkbox&quot; + &quot; style=&quot; + &quot;text-align:center&quot; + &quot;&gt;&lt;input type=&quot; + &quot;checkbox&quot; + &quot;&gt;&lt;/input&gt;&lt;/td&gt;&quot;;
  10. table_data += &quot;&lt;/tr&gt;&quot;;
  11. });
  12. $(&quot;#table&quot;).append(table_data);
  13. });
  14. jQuery(&#39;#table-form&#39;).submit(function() {
  15. var rows = document.getElementsByTagName(&quot;tr&quot;);
  16. for (var i = 1; i &lt; rows.length; i++) {
  17. var cols = rows[i].getElementsByTagName(&quot;td&quot;);
  18. var checkbox = cols[3].getElementsByTagName(&quot;input&quot;)[0];
  19. if (checkbox.checked) {
  20. var email = cols[0].innerHTML;
  21. $.ajax({
  22. url: $(this).attr(&#39;action&#39;),
  23. method: &#39;POST&#39;,
  24. data: { email: email },
  25. success: function(data) {
  26. console.log(&quot;success, email: &quot; + email);
  27. alert(&quot;success&quot;);
  28. },
  29. error: function() {
  30. alert(&quot;error&quot;);
  31. }
  32. });
  33. }
  34. console.log(checkbox.checked);
  35. }
  36. });
  37. });

and the MainController.java

  1. @Controller
  2. @RequestMapping(path=&quot;/mitglied&quot;) public class MainController {
  3. @Autowired
  4. private MitgliederRepository mitgliedRepository;
  5. @PostMapping(path=&quot;/unlockUpdate&quot;)
  6. public @ResponseBody void unlockSelectedUsers(@RequestParam String email) {
  7. System.out.println(email);
  8. }

the complete error message (on localhost:8080/mitglied/unlockUpdates) is:

Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.

Fri Apr 10 13:43:42 CEST 2020
There was an unexpected error (type=Bad Request, status=400).
Required String parameter 'email' is not present

答案1

得分: 0

以下是已翻译的内容：

unlock.html

  1. <div id="background">
  2.     <div id="frame">
  3.         <h1 id="table-title">Freischaltung</h1>
  4.         <div id="scroll">
  5.             <table id="table">
  6.                 <thead>
  7.                     <tr>
  8.                         <th>E-Mail</th>
  9.                         <th>Vorname</th>
  10.                         <th>Nachname</th>
  11.                         <th><input id="unlock-all" type="checkbox"></th>
  12.                     </tr>
  13.                 </thead>
  14.                 <tbody></tbody>
  15.             </table>
  16.         </div>
  17.         <div id="btn-container">
  18.             <button id="unlock-btn" onclick="submit()">Freischalten</button>
  19.         </div>
  20.     </div>
  21. </div>
  22. <script src="../static/js/unlock.js"></script>

unlock.js

  1. jQuery(document).ready(function() {
  2.     updateTable();
  3. });
  5. function updateTable() {
  6.     $.getJSON("http://localhost:8080/mitglied/unlock", function(data) {
  7.         var table_data = "";
  8.         $.each(data, function(key, value) {
  9.             table_data += "<tr>";
  10.             table_data += "<td>" + value.email + "</td>";
  11.             table_data += "<td>" + value.vorname + "</td>";
  12.             table_data += "<td>" + value.nachname + "</td>";
  13.             table_data += "<td class=" + "unlock-checkbox" + "><input type=" + "checkbox" + "></input></td>";
  14.             table_data += "</tr>";
  15.         });
  16.         $("#table").append(table_data);
  17.     });
  18. }
  20. function submit() {
  21.     var rows = document.getElementsByTagName("tr");
  23.     //get the checked value for each table row
  24.     for (var i = 1; i < rows.length; i++) {
  25.         var cols = rows[i].getElementsByTagName("td");
  26.         var checkbox = cols[3].getElementsByTagName("input")[0];
  28.         if (checkbox.checked) {
  29.             var email = cols[0].innerHTML;
  31.             $.ajax({
  32.                 type: 'POST',
  33.                 url: 'http://localhost:8080/mitglied/unlockUpdate',
  34.                 data: { 'email': email },
  35.                 success: function(msg) {
  36.                     alert("success");
  37.                     window.location.reload();
  38.                 }
  39.             });
  40.         }
  41.     }
  42. }

MainController.java

  1. @Controller
  2. @RequestMapping(path="/mitglied")
  3. public class MainController {
  4.     @Autowired
  5.     private MitgliederRepository mitgliedRepository;
  7.     @RequestMapping(path="/unlockUpdate", method = RequestMethod.POST)
  8.     public @ResponseBody void unlockSelectedUsers(@RequestParam (required=false) String email) {
  9.         Iterable<Mitglied> mitglieder = mitgliedRepository.findAll();
  10.         List<Mitglied> mitgliederListe = new ArrayList();
  11.         mitglieder.iterator().forEachRemaining(mitgliederListe::add);
  13.         for (Mitglied m : mitgliederListe) {
  14.             if (m.getEmail().equals(email)) {
  15.                 m.setFreigeschaltet(true);
  16.                 mitgliedRepository.save(m);
  17.                 break;
  18.             }
  19.         }
  20.         System.out.println(email);
  21.     }
  22. }
英文:

After trying a lot of stuff this is the solution I landed on and works for me

Note that the divs changed and it's no longer a form, the action is now handled via an onclick function. And I already styled it so divs are different now.

the unlock.html

  1. &lt;div id=&quot;background&quot;&gt;
  2. &lt;div id=&quot;frame&quot;&gt;
  3. &lt;h1 id=&quot;table-title&quot;&gt;Freischaltung&lt;/h1&gt;
  4. &lt;div id=&quot;scroll&quot;&gt;
  5. &lt;table id=&quot;table&quot;&gt;
  6. &lt;thead&gt;
  7. &lt;tr&gt;
  8. &lt;th&gt;E-Mail&lt;/th&gt;
  9. &lt;th&gt;Vorname&lt;/th&gt;
  10. &lt;th&gt;Nachname&lt;/th&gt;
  11. &lt;th&gt;&lt;input id=&quot;unlock-all&quot; type=&quot;checkbox&quot;&gt;&lt;/th&gt;
  12. &lt;/tr&gt;
  13. &lt;/thead&gt;
  14. &lt;tbody&gt;&lt;/tbody&gt;
  15. &lt;/table&gt;
  16. &lt;/div&gt;
  17. &lt;div id=&quot;btn-container&quot;&gt;
  18. &lt;button id=&quot;unlock-btn&quot; onclick=&quot;submit()&quot;&gt;Freischalten&lt;/button&gt;
  19. &lt;/div&gt;
  20. &lt;/div&gt;
  21. &lt;/div&gt;
  22. &lt;script src=&quot;../static/js/unlock.js &quot;&gt;&lt;/script&gt;

the JavaScript file unlock.js

  1. jQuery(document).ready(function() {
  2. updateTable();
  3. });
  4. function updateTable() {
  5. $.getJSON(&quot;http://localhost:8080/mitglied/unlock&quot;, function(data) {
  6. var table_data = &quot;&quot;;
  7. $.each(data, function(key, value) {
  8. table_data += &quot;&lt;tr&gt;&quot;;
  9. table_data += &quot;&lt;td&gt;&quot; + value.email + &quot;&lt;/td&gt;&quot;;
  10. table_data += &quot;&lt;td&gt;&quot; + value.vorname + &quot;&lt;/td&gt;&quot;;
  11. table_data += &quot;&lt;td&gt;&quot; + value.nachname + &quot;&lt;/td&gt;&quot;;
  12. table_data += &quot;&lt;td class=&quot; + &quot;unlock-checkbox&quot; + &quot;&gt;&lt;input type=&quot; + &quot;checkbox&quot; + &quot;&gt;&lt;/input&gt;&lt;/td&gt;&quot;;
  13. table_data += &quot;&lt;/tr&gt;&quot;;
  14. });
  15. $(&quot;#table&quot;).append(table_data);
  16. });
  17. }
  18. function submit() {
  19. var rows = document.getElementsByTagName(&quot;tr&quot;);
  20. //get the checked value for each table row
  21. for (var i = 1; i &lt; rows.length; i++) {
  22. var cols = rows[i].getElementsByTagName(&quot;td&quot;);
  23. var checkbox = cols[3].getElementsByTagName(&quot;input&quot;)[0];
  24. if (checkbox.checked) {
  25. var email = cols[0].innerHTML;
  26. $.ajax({
  27. type: &#39;POST&#39;,
  28. url: &#39;http://localhost:8080/mitglied/unlockUpdate&#39;,
  29. data: { &#39;email&#39;: email },
  30. success: function(msg) {
  31. alert(&quot;success&quot;);
  32. window.location.reload();
  33. }
  34. });
  35. }
  36. }
  37. }

and the MainController.java

  1. @Controller
  2. @RequestMapping(path=&quot;/mitglied&quot;) public class MainController {
  3. @Autowired
  4. private MitgliederRepository mitgliedRepository;
  5. @RequestMapping(path=&quot;/unlockUpdate&quot;, method = RequestMethod.POST)
  6. public @ResponseBody void unlockSelectedUsers(@RequestParam (required=false) String email) {
  7. Iterable&lt;Mitglied&gt; mitglieder = mitgliedRepository.findAll();
  8. List&lt;Mitglied&gt; mitgliederListe = new ArrayList();
  9. mitglieder.iterator().forEachRemaining(mitgliederListe::add);
  10. for (Mitglied m : mitgliederListe) {
  11. if (m.getEmail().equals(email)) {
  12. m.setFreigeschaltet(true);
  13. mitgliedRepository.save(m);
  14. break;
  15. }
  16. }
  17. System.out.println(email);
  18. }

huangapple
  • 本文由 发表于 2020年4月10日 19:30:59
  • 转载请务必保留本文链接：https://go.coder-hub.com/61139393.html
  • ajax
  • html
  • java
  • javascript
  • spring
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定