用JSON提交的JSP表单

虽然自学我来了，但我必须提交表单。用JSON提交的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.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 = 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>

来源

2017-02-13 sourav.ken

这不是一个有效的'enctype'值。如果您想提交JSON，您必须使用JavaScript将其发送到服务器。 –

谢谢M. Deinum，我想要的是将数据转换为JSON，并将其发送到服务器。为此你可以参考任何示例或教程或任何阅读材料。在网上，我看到大量的内容，但不是我想要工作的方向。这变得很混乱:( –

你不能直接做，你需要在你的窗体和服务之间有一层。为此，你需要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); 
     } 
    }) 
    }); 
});

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

来源

2017-02-21 05:58:15

感谢您的输入。我想要的只是创建JSON的形式。我明白你分享的一点，但我没有得到如何将干净的方式转换成json（我的知识在前端是非常有限的）我也想了解，即使我的来自是正确的，并且支持我共享的Json格式 –

@ sourav.ken https://github.com/raphaelm22/jquery.serializeToJSON –

谢谢Tushar，I尝试了你分享的内容，它让我接近我所寻找的东西，但不是我确切需要的东西。这是给我 { “问题”： “ttttdd”， “ansSet”：{ “0”：{ “providedOption”： “广告”， “isRightOption”：真 }， “1”： { “providedOption”： “ASDF”， “isRightOption”：假 }， “2”：{ “providedOption”： “RR”， “isRightOption”：假 }， “3”：{ “providedOption”：“asdf”， “isRightOption”：false } } } 但是，如果你看到我的结构是不一样的。 –

用JSON提交的JSP表单

回答

相关问题