个人中心
gpt4 book ai didi

jquery - 通过 jQuery 和 Spring Boot 创建简单的注册表单

转载 作者：行者123 更新时间：2023-12-01 07:04:39 25 4
gpt4 key购买 nike

晚上好。我正在尝试使用 jQuery 3.2.1 和 SpringBoot 2.0.7 创建一个简单的注册表单。 (为您提供您可能需要的所有信息)。抛出异常“未捕获错误:Bootstrap 的 JavaScript 需要 jQuery 在 bootstrap.min.js:6"。

这是我的html代码(在标题中有输入bootstrap 3.3.7和jQuery 3.2.1的脚本):`

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FG - Sign up</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Latest compiled and minified CSS -->
  <link rel = "stylesheet" href="signupcss.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
   <div id = "main">

           <div id = "block1" class = "container-fluid">

              <div id="block1middle" class = "container-fluid">
               <h1>Registration</h1>
               <form action="#" name = "newUserForm" autocomplete="email">
               <p>Your email:<input type="text" name = "inputEmail"></p><br>
               <p>Password: 
               <input type="password" name = "inputPassword">
               </p>
               <button form="newUserForm" type="submit" id = "saveNewUser" ><p>Submit</p></button>
               </form>
               </div>

           </div>
             <script>
                 $('#saveNewUser').click(function(){
                     var emailVar = $('inputEmail').val();
                 var passwordVar = $('inputPassword').val();
                var newUser = {
                  "email": emailVar,
                "password": passwordVar,
                };
               $.ajax({
                   'url' : 'http://localhost:8080/users/save',
                   'type' : 'PUT',
                   'contentType' : 'application/json',
                   'dataType': 'json',
                   'data' : JSON.stringify(newUser),
                   'success' : function(data){
                       alert(data)
                   },
                   'error': function(error){
                       console.log(error);
                   }
               });
                 })

           </script>

   </div>

</body>
</html>`

这是我的 localhost:8080/users/save UserController: 

`     
@RestController
@CrossOrigin
@RequestMapping("/users")
public class UserController {

    @Autowired
    private UserService userService;


    @PutMapping("/save")
    public void save(@RequestBody UserRequest userRequest){
        userService.save(userRequest);
    }

}      '

UserRequest 只有两个字段:电子邮件和密码(带有 getters 和 setters)。 UserService 的“保存”方法仅检查电子邮件的原创性并保存新用户。我很感激任何帮助或批评!谢谢。附:我是编程的初学者，因此我将非常感谢有关此主题的任何有用的链接。

最佳答案

让我尝试指出任何可能有帮助的内容:

您收到该错误的原因是，在您的 中，您以错误的顺序导入了脚本。由于您首先导入 bootstrap (这取决于 jquery)，您会收到该错误。

原文:

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

更新:

  <!-- Latest compiled and minified JavaScript -->
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

接下来，虽然您那里的代码应该可以工作，但由于您使用的是表单，因此您实际上可以修改它来为您进行调用

<form action="PUT" target="/users/save" name="newUserForm" autocomplete="email">

这将调用/users/save的目标，并在正文中传递您的电子邮件/密码 (其键由 名称定义)输入中的字段。 作为 url 参数。示例:

<form action="#" name = "newUserForm" autocomplete="email">
  <p>Your email: <input type="text" name = "inputEmail"></p><br>
  <p>Password: <input type="password" name = "inputPassword"></p>
  <button form="newUserForm" type="submit" id = "saveNewUser" > 
  <p>Submit</p></button>
</form>

/users/save?inputEmail=userremail&inputPassword=userpass

这可以在 Spring Boot 中通过

访问 
@PutMapping("/save")
public void save(@Param("inputEmail" String email, @Param("inputPassword") String password) {
    //...
}

现在，如果您想使用 javascript 将其作为 JSON 传递，您可以按照 @Keetch 所说的进行操作，您只需进行编辑，将 id 字段添加到您的电子邮件/密码中(您可以替换名称字段，但您无法通过表单访问它)

<form action="#" name = "newUserForm" autocomplete="email">
  <p>Your email: <input type="text" name = "inputEmail" id="inputEmail"></p><br>
  <p>Password: <input type="password" name = "inputPassword" id="inputPassword"></p>
  <button form="newUserForm" type="submit" id = "saveNewUser" > 
  <p>Submit</p></button>
</form>

现在您可以通过

访问它们的值 
var emailVar = $('#inputEmail').val();
var passwordVar = $('#inputPassword').val();

注意前面额外的#，它表示您正在寻找 ID使用 $() 时，“#name”查找 id，“.name”查找类，“name”查找具有该值的元素

本着其他改进的精神，由于您的意图是 RESTful API，因此可以做一些事情来更加忠实于 REST。

  1. 此调用应该是 POST 而不是 PUT。 POST 是非幂等的调用，而 PUT 是幂等的。这意味着，如果您进行一次或多次 PUT 调用，结果将是相同的。然而，如果多次调用 POST 可能会导致多种结果。尽管从技术上讲，您只能为一封电子邮件创建一个用户，但它更适合 POST，而不是 PUT。 PUT 通常用于更新对象(注意:通过提供整个对象。如果您想更新对象的一部分，可以使用 PATCH)
  2. REST 端点基于动词/名词模式工作。 POST USER 的意思是“创建用户”。这会使 URL 中额外的 /save 部分变得多余。我建议删除它，因为 POST 本质上是一种保存。
  3. 通常的做法是在页面底部而不是页面顶部加载 JavaScript 依赖项，以使其加载速度更快。您的内联脚本位于底部，这很好，因此您可能需要考虑将依赖项移至底部标记的正上方。
  4. 我不会讨论以明文形式保存密码，因为这是一个完全不同的主题。但应该注意的是，永远不要计划在生产中使用明文密码:)
  5. 既然您已经在使用出色的 Spring Boot，也许您会考虑使用 Spring Security -- 您可以在这里找到一个很棒的教程 https://www.baeldung.com/spring-security-thymeleaf
  6. 最后，我发现您正在尝试使用 Bootstrap，但看起来您实际上并未使用任何 Bootstrap UI 元素。首先，如果这不是项目的要求，我建议使用 Bootstrap 4，因为它已经发布了一段时间并且是最新版本。其次，您可以在这里找到一个漂亮且简单的引导登录页面:https://getbootstrap.com/docs/4.0/examples/sign-in/

关于jquery - 通过 jQuery 和 Spring Boot 创建简单的注册表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51812848/

25 4 0
文章推荐： java - 使用方法初始化数组 - Java
文章推荐： python - 如何在 Anaconda 中取消环境链接？
文章推荐： dom - DOM 应用程序的 CocoonJs 与 Phonegap 比较……或者只是使用 Canvas 和 CocoonJs？
文章推荐： java- 2天不同时间之间的差异
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com