AJAX/jQuery 在提交时将前端用户输入作为 NULL 发送到 MYSQL。有啥解决办法吗? (SpringMVC、Eclipse、JSP)

Posted

技术标签:

【中文标题】AJAX/jQuery 在提交时将前端用户输入作为 NULL 发送到 MYSQL。有啥解决办法吗? (SpringMVC、Eclipse、JSP)【英文标题】:AJAX/jQuery sending front end user input as NULL to MYSQL upon submission. Any fix? (SpringMVC, Eclipse, JSP)AJAX/jQuery 在提交时将前端用户输入作为 NULL 发送到 MYSQL。有什么解决办法吗? (SpringMVC、Eclipse、JSP) 【发布时间】:2021-10-07 23:02:11 【问题描述】:

我在 Eclipse 中使用 Spring MVC 创建一个 ToDo 列表。 ToDo 中添加的所有内容(来自用户输入)都将使用 AJAX/jQuery 转到 mysql 数据库列。下面的代码是一个 JSP 文件。

但是,它正在添加一行,但被发送为 NULL。

谁能教我为什么它发送为 NULL 以及我可以做些什么来解决它?谢谢!

      <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
            pageEncoding="ISO-8859-1"%>
        <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
        <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
        <%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
        
        
        
        <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
        <html>
        <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
         
        </head>
        <body>
        
        <p><a class='btn' href="#add" rel="modal:open">Add New Company</a></p>
        <div class="row">
        <div class="column">
        <div id="myDIV" class="header" >
          <h2 style="margin:5px">To Do List</h2>
          
            <form id="add" action="#" class="add_form modal" > 
          <input type="text" id="myInput" name="name" placeholder="Title...">      
          <span id = "addNew"  onclick="newElement()" class="addBtn">Add</span>
         </form>
        </div>
         
        <ul id="myUL" class="list1">
         
        </ul>
        
        </div>
        
        <div id='msg'/>
        
        
            
<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>


        <script type="text/javascript">
         
    
    function newElement() 
           
      var a = document.createElement("a");
      var ulist = document.getElementById("myUL");
      var newItem = document.createElement("li");
      var yoube = document.getElementById('myInput');

      a.textContent = yoube.value;
      a.setAttribute('href', yoube.value);
      newItem.appendChild(a);
      ulist.appendChild(newItem);
         
      $(document).delegate('#addNew', 'click', function(event) 
            event.preventDefault();
            
            var name = $('#name').val();
            
            $.ajax(
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "http://localhost:8080/company/save",
                data: JSON.stringify('VARIABLEXYZ': name),
                cache: false,
                success: function(result) 
                    alert("Hello! I am an alert box!!");
                ,
                error: function(err) 
                    alert("Hello! This went wrong");            
            );
        );
      
    
    
        
        </script>
        
      
        
        </body>
        </html>

【问题讨论】:

【参考方案1】:

尝试使用var name = $("input[name='name']") 选择名称为“name”的所有输入项。

您可能还必须编写一个函数来管理每个值​​的发送方式。例如,

    let json_data = 
    name.each(function(index) 
        json_data[index] = this.value
    );

【讨论】:

很遗憾没有成功。我继续删除了第二个用户输入框以及与之相关的所有内容,以方便任何人阅读此内容。 在 json_data[index] = this.value 行下输入 console.log(index, this.value) 并回复它在控制台上显示的内容

以上是关于AJAX/jQuery 在提交时将前端用户输入作为 NULL 发送到 MYSQL。有啥解决办法吗? (SpringMVC、Eclipse、JSP)的主要内容,如果未能解决你的问题,请参考以下文章

使用 django ajax jquery 提交一个文件不起作用的表单

我正在尝试将我的表单链接到我的 PHP 页面,并且我想在用户单击提交按钮时将用户的输入打印到该页面上

前端 - js方式Ajax/ jquery方式Ajax / 伪 ajax /伪ajax 进阶方式

在按钮单击时将文本添加到现有输入字段

使用 Ajax jQuery 提交 Django 表单的简单方法

使用AngularJS提交时将空输入字段设置为ng-invalid?