Javascript 使用JSON提交JSP表单_Javascript_Json_Spring_Forms_Jsp

Javascript 使用JSON提交JSP表单

javascript json spring forms jsp

Javascript 使用JSON提交JSP表单,javascript,json,spring,forms,jsp,Javascript,Json,Spring,Forms,Jsp,在自学的过程中，我不得不提交表格我有控制器QuestionController.java package com.java1.project.question; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.RequestBody; import org.springframe

在自学的过程中，我不得不提交表格

我有控制器QuestionController.java

package com.java1.project.question;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

@RestController
public class QuestionController
{
    @Autowired
    private QuestionService questionService;

    @RequestMapping(value = "/addques", method = RequestMethod.POST)
    public void addQuestion(@RequestBody Question question)
    {
        questionService.addQuestion(question);
    }
}

我已经用邮递员测试了我的控制器。如果数据以低于JSON的格式发布，那么我的控制器正在处理它，数据将保存在数据库中

URL: http://localhost:8080/addques
Method: POST
Header: Content-Type = application/json
Body: 
{
    "question" : "some long question",
    "ansList" : [
        {
            "providedOption" : "some option 1",
            "isRightOption" : false
        }, 
        {
            "providedOption" : "some option 2",
            "isRightOption" : false
        }, 
        {
            "providedOption" : "some option 3",
            "isRightOption" : true
        }, 
        {
            "providedOption" : "some option 4",
            "isRightOption" : false
        }   
    ]
}

我不确定的是，我在JSP中犯了什么错误，而我的数据没有通过

为了制作表格，我使用了以下网站作为参考

网站URL=

insertques.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Question input page</title>
</head>
<body>

    <form id="addquestion" method="post" action="/addques" enctype="application/json">
        <p>Question<input type="text" name="question"><br></p>

        Answer:<br>
        1. <input type="text" name="ansSet[0][providedOption]">
            <select name="ansSet[0][isRightOption]">
               <option value="true">true</option>
               <option value="false">false</option>
            </select>
            <br>
        2. <input type="text" name="ansSet[1][providedOption]">
            <select name="ansSet[1][isRightOption]">
               <option value="true">true</option>
               <option value="false">false</option>
            </select>
            <br>
        3. <input type="text" name="ansSet[2][providedOption]">
            <select name="ansSet[2][isRightOption]">
               <option value="true">true</option>
               <option value="false">false</option>
            </select>
            <br>
        4. <input type="text" name="ansSet[3][providedOption]">
            <select name="ansSet[3][isRightOption]">
               <option value="true">true</option>
               <option value="false">false</option>
            </select>
            <br><br>
        <input type="reset" name="resetall">
        <input type="submit" name="submitform">

    </form>
</body>
</html>


问题输入页
问题

回答：

1.
真的
假的


2.
真的
假的


3.
真的
假的


4.
真的
假的

您不能直接执行，您需要在表单和服务之间设置一个层。为此，您需要javascript来提交表单，而不是直接提交表单

JS:-您需要监听表单提交并停止默认表单提交，然后才能获取表单字段并将其作为JSON发送

$(document).ready(function() {
  var $form = $("#addquestion");
  $form.on('submit', function(e) {
    e.preventDefault(); // stop default form submission 
    $.ajax({  // form submission via ajax
      url: $form.attr('action'), // form submission url
      type: 'POST', // request type
      dataType: 'json', // data type
      data: $form.serialize(), // get all data from the form
      success: function(result) {
        console.log(result); // response back from server in case of success
      },
      error: function(xhr, resp, text) { // response back from server in case of failure 
        console.log(xhr, resp, text);
      }
    })
  });
});

请务必阅读链接以更好地理解：-

您不能直接执行，您需要在表单和服务之间设置一个层。为此，您需要javascript来提交表单，而不是直接提交表单

JS:-您需要监听表单提交并停止默认表单提交，然后才能获取表单字段并将其作为JSON发送

$(document).ready(function() {
  var $form = $("#addquestion");
  $form.on('submit', function(e) {
    e.preventDefault(); // stop default form submission 
    $.ajax({  // form submission via ajax
      url: $form.attr('action'), // form submission url
      type: 'POST', // request type
      dataType: 'json', // data type
      data: $form.serialize(), // get all data from the form
      success: function(result) {
        console.log(result); // response back from server in case of success
      },
      error: function(xhr, resp, text) { // response back from server in case of failure 
        console.log(xhr, resp, text);
      }
    })
  });
});

请务必阅读链接以更好地理解：-

这不是有效的

enctype

值。如果你想提交JSON，你必须使用JavaScript将其发送到服务器。感谢M.Deinum，我想要的是将我的数据转换成JSON，这样就可以将其发送到服务器。为此，你可以参考任何例子、教程或阅读材料。在网上，我看到了大量的内容，但没有看到我想工作的方向。这变得非常令人困惑：（这不是一个有效的

enctype

值。如果你想提交JSON，你必须使用JavaScript将其发送到服务器。感谢M.Deinum，我想要的是将我的数据转换为JSON，这样它就可以发送到服务器。关于这一点，你可以参考任何示例、教程或任何阅读材料。在网上，我看到大量内容，但在目录上看不到我想工作。这变得非常混乱：（谢谢你的输入。我想要的只是在形式之外创建JSON。我理解你分享的内容，但我不知道如何以干净的方式将from对象转换为JSON。（我在前端的知识非常有限）。我还想了解，即使我的from是正确的，ans也支持我共享的Json格式。感谢Tushar，我尝试了你共享的内容。它让我接近我正在寻找的内容，但不是我真正需要的内容。它给了我{“问题”：“ttttdd”，“ansSet”：{“0”：{“providedOption”：“ad”，“isRightOption”：true}，“1”：{“providedOption”：“asdf”，“isRightOption”：false}，“2”：{“providedOption”：“rr”，“isRightOption”：false}，“3”：{“providedOption”：“asdf”，“isRightOption”：false}}但是如果你看到我的结构，它就不一样了。@sourav.ken你能发布你期望的输出吗？以下是我想要的输出：{“问题”：“一些长问题”，“ansList”：[{“providedOption”：“一些选项1”，“isRightOption”：false}，{“providedOption”：“某些选项2”，“isRightOption”：false}，{“providedOption”：“某些选项3”，“isRightOption”：true}，{“providedOption”：“某些选项4”，“isRightOption”：false}]}@sourav.ken

var json=$（“#addquestion”）。serializeToJSON({associateArray:false}）

并将您的html表单元素名称更新为

----

，谢谢您的输入。我想要的只是在表单之外创建JSON。我理解您共享的内容，但我不知道如何以干净的方式将from对象转换为JSON。（我在前端的知识非常有限）。我还想了解，即使我的from是正确的，ans也支持我共享的Json格式。感谢Tushar，我尝试了你共享的内容。它让我接近我要寻找的内容，但不是我真正需要的内容。它给了我{“问题”：“ttttdd”，“ansSet”：{“0”：{“providedOption”：“ad”，“isRightOption”：true}，“1“：{“providedOption”：“asdf”，“isRightOption”：false}”，2:{“providedOption”：“rr”，“isRightOption”：false}，3:{“providedOption”：“asdf”，“isRightOption”：false}但是如果你看到我的结构，它就不一样了。@sourav.ken你能发布你期望的输出吗？以下是我想要的输出：{“问题”：“一些长问题”，“ansList”：[{“providedOption”：“一些选项1”，“isRightOption”：false}，{“providedOption”：“某些选项2”，“isRightOption”：false}，{“providedOption”：“某些选项3”，“isRightOption”：true}，{“providedOption”：“某些选项4”，“isRightOption”：false}]}@sourav.ken

var json=$（“#addquestion”）。serializeToJSON({associateArray:false}）；

并将html表单元素名称更新为

----