【问题标题】:JSP form Submission with JSON使用 JSON 提交 JSP 表单
【发布时间】:2017-07-01 01:23:08
【问题描述】:

在自学的过程中,我遇到了必须提交表单的地步。

我有控制器 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);
    }
}

我已经使用 post-man 测试了我的控制器。如果数据以低于 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 中做错了什么,我的数据没有通过?

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

网站网址 = https://darobin.github.io/formic/specs/json/

插入ques.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>

【问题讨论】:

  • 这不是一个有效的enctype 值。如果要提交 JSON,则必须使用 JavaScript 将其发送到服务器。
  • 感谢 M. Deinum,我想要的是将我的数据从数据转换为 JSON,以便将其发送到服务器。为此,您可以参考任何示例或教程或任何阅读材料。在网上我看到了大量的内容,但没有看到我想要工作的方向。这变得非常混乱:(

标签: javascript json spring forms jsp


【解决方案1】:

您不能直接执行此操作,您需要在表单和服务之间放置一个层。为此,您需要 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);
      }
    })
  });
});

请阅读链接以获得更好的理解:-

【讨论】:

  • 感谢您的意见。我想要的只是创建格式不正确的 JSON。我了解您分享的内容,但我不知道如何以干净的方式将 from 对象转换为 json。 (我在前端的知识非常有限)。即使我的 from 是正确的并且支持我共享的 Json 格式,我也想了解。
  • 感谢 Tushar,我尝试了您分享的内容。它让我接近我正在寻找的东西,但不是我真正需要的东西。它给了我 { "question": "ttttdd", "ansSet": { "0": { "providedOption": "ad", "isRightOption": true }, "1": { "providedOption": "asdf" , "isRightOption": false }, "2": { "providedOption": "rr", "isRightOption": false }, "3": { "providedOption": "asdf", "isRightOption": false } } } 但是如果你看到我的结构就不一样了。
  • @sourav.ken 你能发布你期望的输出吗?
  • 以下是我想要的输出: { "question" : "some long question", "ansList" : [ { "providedOption" : "some option 1", "isRightOption" : false }, { “providedOption”:“某些选项 2”,“isRightOption”:false },{“providedOption”:“某些选项 3”,“isRightOption”:true },{“providedOption”:“某些选项 4”,“isRightOption”:假}]}
  • @sourav.ken var json = $("#addquestion").serializeToJSON({associativeArrays: false}); 并将您的 html 表单元素名称更新为 &lt;input type="text" name="ansSet[0].providedOption"&gt; &lt;select name="ansSet[0].isRightOption"&gt; ----- &lt;input type="text" name="ansSet[1].providedOption"&gt; &lt;select name="ansSet[1].isRightOption"&gt;
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多