JSP表单使用JSON提交

Question

在自我学习的过程中，我必须提交表格。

我有控制器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/

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>

Answer 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);
      }
    })
  });
});

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

JSP表单使用JSON提交

问题描述

1 个解决方案

解决方案1
0 2017-02-21 05:58:15

JSP表单使用JSON提交

问题描述

1 个解决方案

解决方案1 0 2017-02-21 05:58:15

解决方案1
0 2017-02-21 05:58:15