用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表單

回答

相關問題