Fatal编程技术网
  • javascript/
  • Javascript 将数据从ajax发送到spring控制器：所需的字符串参数不存在

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

javascript java html ajax spring

Javascript 将数据从ajax发送到spring控制器：所需的字符串参数不存在,javascript,java,html,ajax,spring,Javascript,Java,Html,Ajax,Spring,我知道关于这个错误消息已经有很多问题了，但是没有任何东西可以帮助我解决问题 我试图通过一个表激活一个用户帐户，该表包含电子邮件、名字和姓氏以及每个条目的复选框。 首先，选中要解锁的用户的复选框，然后按下按钮发送请求，控制器将仅将所选用户的“激活”状态从0（停用）更改为1（激活） 我有一个HTML、一个JavaScript和一个Java控制器文件。 请注意，我目前正在localhost上尝试此操作，并通过使用Chrome.exe启动Chrome per cmd（禁用web安全性）允许从文件访问文件

我知道关于这个错误消息已经有很多问题了，但是没有任何东西可以帮助我解决问题

我试图通过一个表激活一个用户帐户，该表包含电子邮件、名字和姓氏以及每个条目的复选框。 首先，选中要解锁的用户的复选框，然后按下按钮发送请求，控制器将仅将所选用户的“激活”状态从0（停用）更改为1（激活）

我有一个HTML、一个JavaScript和一个Java控制器文件。 请注意，我目前正在localhost上尝试此操作，并通过使用Chrome.exe启动Chrome per cmd（禁用web安全性）允许从文件访问文件，从而禁用了google chromes cross origin

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

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

所以我想问的主要问题是，我从表中获得的电子邮件地址没有传递给控制器，但我如何正确地做到这一点

这张桌子是什么样子的：

unlock.html

<div id="background">
  <div id="scroll-horizontal">
    <form id="table-form" method="POST" action="http://localhost:8080/mitglied/unlockUpdate">
      <table id="table">
        <tr>
          <th>E-Mail</th>
          <th>Vorname</th>
          <th>Nachname</th>
          <th><input id="unlock-all" type="checkbox"></th>
        </tr>
       </table>
       <input id="unlock-btn" type="submit" value="Freischalten"></input>
      </form>
    </div>
</div>

<script src="../static/js/unlock.js "></script>

<div id="background">
        <div id="frame">
            <h1 id="table-title">Freischaltung</h1>
            <div id="scroll">
                <table id="table">
                    <thead>
                        <tr>
                            <th>E-Mail</th>
                            <th>Vorname</th>
                            <th>Nachname</th>
                            <th><input id="unlock-all" type="checkbox"></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div id="btn-container">
                <button id="unlock-btn" onclick="submit()">Freischalten</button>
            </div>
        </div>
    </div>

<script src="../static/js/unlock.js "></script>
完整的错误消息（在localhost:8080/mitglied/unlockUpdates上）是：

白标错误页 此应用程序没有/error的显式映射，因此您将其视为回退

4月10日星期五13:43:42 CEST 2020 出现意外错误（类型=错误请求，状态=400）。
所需的字符串参数“email”不存在

在尝试了很多东西后，这是我找到的解决方案，对我有效

请注意，divs已更改，不再是表单，现在通过onclick函数处理该操作。我已经设计好了，所以现在div不同了

unlock.html

<div id="background">
  <div id="scroll-horizontal">
    <form id="table-form" method="POST" action="http://localhost:8080/mitglied/unlockUpdate">
      <table id="table">
        <tr>
          <th>E-Mail</th>
          <th>Vorname</th>
          <th>Nachname</th>
          <th><input id="unlock-all" type="checkbox"></th>
        </tr>
       </table>
       <input id="unlock-btn" type="submit" value="Freischalten"></input>
      </form>
    </div>
</div>

<script src="../static/js/unlock.js "></script>

<div id="background">
        <div id="frame">
            <h1 id="table-title">Freischaltung</h1>
            <div id="scroll">
                <table id="table">
                    <thead>
                        <tr>
                            <th>E-Mail</th>
                            <th>Vorname</th>
                            <th>Nachname</th>
                            <th><input id="unlock-all" type="checkbox"></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div id="btn-container">
                <button id="unlock-btn" onclick="submit()">Freischalten</button>
            </div>
        </div>
    </div>

<script src="../static/js/unlock.js "></script>


弗赖斯卡尔顿
电子邮件
沃名称
姓氏
弗赖斯卡尔滕
JavaScript文件unlock.js

jQuery(document).ready(function() {

    $.getJSON("http://localhost:8080/mitglied/unlock", function(data) {
        var table_data = "";
        $.each(data, function(key, value) {
            table_data += "<tr>";
            table_data += "<td>" + value.email + "</td>";
            table_data += "<td>" + value.vorname + "</td>";
            table_data += "<td>" + value.nachname + "</td>";
            table_data += "<td class=" + "unlock-checkbox" + " style=" + "text-align:center" + "><input type=" + "checkbox" + "></input></td>";
            table_data += "</tr>";
        });

        $("#table").append(table_data);
    });

    jQuery('#table-form').submit(function() {
        var rows = document.getElementsByTagName("tr");

        for (var i = 1; i < rows.length; i++) {
            var cols = rows[i].getElementsByTagName("td");
            var checkbox = cols[3].getElementsByTagName("input")[0];

            if (checkbox.checked) {
                var email = cols[0].innerHTML;

                $.ajax({
                    url: $(this).attr('action'),
                    method: 'POST',
                    data: { email: email },

                    success: function(data) {
                        console.log("success, email: " + email);
                        alert("success");
                    },
                    error: function() {
                        alert("error");
                    }
                });
            }
            console.log(checkbox.checked);
        }
    });
});

jQuery(document).ready(function() {
    updateTable();
});

function updateTable() {
        $.getJSON("http://localhost:8080/mitglied/unlock", function(data) {
        var table_data = "";
        $.each(data, function(key, value) {
            table_data += "<tr>";
            table_data += "<td>" + value.email + "</td>";
            table_data += "<td>" + value.vorname + "</td>";
            table_data += "<td>" + value.nachname + "</td>";
            table_data += "<td class=" + "unlock-checkbox" + "><input type=" + "checkbox" + "></input></td>";
            table_data += "</tr>";
        });
        $("#table").append(table_data);
    });
}

function submit() {
    var rows = document.getElementsByTagName("tr");

    //get the checked value for each table row
    for (var i = 1; i < rows.length; i++) {
        var cols = rows[i].getElementsByTagName("td");
        var checkbox = cols[3].getElementsByTagName("input")[0];

        if (checkbox.checked) {
            var email = cols[0].innerHTML;

            $.ajax({
                type: 'POST',
                url: 'http://localhost:8080/mitglied/unlockUpdate',
                data: { 'email': email },
                success: function(msg) {
                    alert("success");
                    window.location.reload();
                }
            });
        }
    }
}

jQuery（文档）.ready（函数（）{
updateTable（）；
});
函数updateTable（）{
$.getJSON（“http://localhost:8080/mitglied/unlock，函数（数据）{
var表_数据=”；
$。每个（数据、函数（键、值）{
表_数据+=“”；
表_data+=“”+value.email+“”；
表_data+=“”+value.vorname+“”；
表_data+=“”+value.nachname+“”；
表_数据+=“”；
表_数据+=“”；
});
$（“#表”）。追加（表#数据）；
});
}
函数提交（）{
var rows=document.getElementsByTagName（“tr”）；
//获取每个表行的选中值
对于（变量i=1；i
以及MainController.java

@Controller
@RequestMapping(path="/mitglied") public class MainController {
@Autowired
  private MitgliederRepository mitgliedRepository;

  @PostMapping(path="/unlockUpdate")
  public @ResponseBody void unlockSelectedUsers(@RequestParam String email) {
      System.out.println(email);
  }

@Controller
@RequestMapping(path="/mitglied") public class MainController {
@Autowired
  private MitgliederRepository mitgliedRepository;

  @RequestMapping(path="/unlockUpdate", method = RequestMethod.POST)
  public @ResponseBody void unlockSelectedUsers(@RequestParam (required=false) String email) {
      Iterable<Mitglied> mitglieder = mitgliedRepository.findAll();
      List<Mitglied> mitgliederListe = new ArrayList();
      mitglieder.iterator().forEachRemaining(mitgliederListe::add);

      for (Mitglied m : mitgliederListe) {
          if (m.getEmail().equals(email)) {
              m.setFreigeschaltet(true);
              mitgliedRepository.save(m);
              break;
          }
      }
      System.out.println(email);
  }

@控制器
@RequestMapping（path=“/mitglied”）公共类MainController{
@自动连线
私人密苏里储蓄密苏里储蓄；
@RequestMapping（path=“/unlockUpdate”，method=RequestMethod.POST）
public@ResponseBody void unlockSelectedUsers（@RequestParam（required=false）字符串电子邮件）{
Iterable mitglieder=mitgliedRepository.findAll（）；
List mitgliederListe=new ArrayList（）；
iterator（）.forEachRemaining（mitgliederListe:：add）；
对于（Mitglied m:mitgliederListe）{
如果（m.getEmail（）.equals（email））{
m、 setFreigeschaltet（真）；
MitgiledRepository.save（m）；
打破
}
}
System.out.println（电子邮件）；
}
在尝试了很多东西之后，这是我找到的解决方案，对我来说很有效

请注意，div已更改，不再是表单，现在通过onclick函数处理操作。我已经对其进行了样式设置，使div现在有所不同

unlock.html

<div id="background">
  <div id="scroll-horizontal">
    <form id="table-form" method="POST" action="http://localhost:8080/mitglied/unlockUpdate">
      <table id="table">
        <tr>
          <th>E-Mail</th>
          <th>Vorname</th>
          <th>Nachname</th>
          <th><input id="unlock-all" type="checkbox"></th>
        </tr>
       </table>
       <input id="unlock-btn" type="submit" value="Freischalten"></input>
      </form>
    </div>
</div>

<script src="../static/js/unlock.js "></script>

<div id="background">
        <div id="frame">
            <h1 id="table-title">Freischaltung</h1>
            <div id="scroll">
                <table id="table">
                    <thead>
                        <tr>
                            <th>E-Mail</th>
                            <th>Vorname</th>
                            <th>Nachname</th>
                            <th><input id="unlock-all" type="checkbox"></th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div id="btn-container">
                <button id="unlock-btn" onclick="submit()">Freischalten</button>
            </div>
        </div>
    </div>

<script src="../static/js/unlock.js "></script>


弗赖斯卡尔顿
电子邮件
沃名称
姓氏
弗赖斯卡尔滕
JavaScript文件unlock.js

jQuery(document).ready(function() {

    $.getJSON("http://localhost:8080/mitglied/unlock", function(data) {
        var table_data = "";
        $.each(data, function(key, value) {
            table_data += "<tr>";
            table_data += "<td>" + value.email + "</td>";
            table_data += "<td>" + value.vorname + "</td>";
            table_data += "<td>" + value.nachname + "</td>";
            table_data += "<td class=" + "unlock-checkbox" + " style=" + "text-align:center" + "><input type=" + "checkbox" + "></input></td>";
            table_data += "</tr>";
        });

        $("#table").append(table_data);
    });

    jQuery('#table-form').submit(function() {
        var rows = document.getElementsByTagName("tr");

        for (var i = 1; i < rows.length; i++) {
            var cols = rows[i].getElementsByTagName("td");
            var checkbox = cols[3].getElementsByTagName("input")[0];

            if (checkbox.checked) {
                var email = cols[0].innerHTML;

                $.ajax({
                    url: $(this).attr('action'),
                    method: 'POST',
                    data: { email: email },

                    success: function(data) {
                        console.log("success, email: " + email);
                        alert("success");
                    },
                    error: function() {
                        alert("error");
                    }
                });
            }
            console.log(checkbox.checked);
        }
    });
});

jQuery(document).ready(function() {
    updateTable();
});

function updateTable() {
        $.getJSON("http://localhost:8080/mitglied/unlock", function(data) {
        var table_data = "";
        $.each(data, function(key, value) {
            table_data += "<tr>";
            table_data += "<td>" + value.email + "</td>";
            table_data += "<td>" + value.vorname + "</td>";
            table_data += "<td>" + value.nachname + "</td>";
            table_data += "<td class=" + "unlock-checkbox" + "><input type=" + "checkbox" + "></input></td>";
            table_data += "</tr>";
        });
        $("#table").append(table_data);
    });
}

function submit() {
    var rows = document.getElementsByTagName("tr");

    //get the checked value for each table row
    for (var i = 1; i < rows.length; i++) {
        var cols = rows[i].getElementsByTagName("td");
        var checkbox = cols[3].getElementsByTagName("input")[0];

        if (checkbox.checked) {
            var email = cols[0].innerHTML;

            $.ajax({
                type: 'POST',
                url: 'http://localhost:8080/mitglied/unlockUpdate',
                data: { 'email': email },
                success: function(msg) {
                    alert("success");
                    window.location.reload();
                }
            });
        }
    }
}

jQuery（文档）.ready（函数（）{
updateTable（）；
});
函数updateTable（）{
$.getJSON（“http://localhost:8080/mitglied/unlock，函数（数据）{
var表_数据=”；
$。每个（数据、函数（键、值）{
表_数据+=“”；
表_data+=“”+value.email+“”；
表_data+=“”+value.vorname+“”；
表_data+=“”+value.nachname+“”；
表_数据+=“”；
表_数据+=“”；
});
$（“#表”）。追加（表#数据）；
});
}
函数提交（）{
var rows=document.getElementsByTagName（“tr”）；
//获取每个表行的选中值
对于（变量i=1；i