2017-02-13 104 views
1

雖然自學我來了,但我必須提交表單。用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> 
+0

這不是一個有效的'enctype'值。如果您想提交JSON,您必須使用JavaScript將其發送到服務器。 –

+0

謝謝M. Deinum,我想要的是將數據轉換爲JSON,並將其發送到服務器。爲此你可以參考任何示例或教程或任何閱讀材料。在網上,我看到大量的內容,但不是我想要工作的方向。這變得很混亂:( –

回答

0

你不能直接做,你需要在你的窗體和服務之間有一層。爲此,你需要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); 
     } 
    }) 
    }); 
}); 

務必閱讀鏈接更好地理解: -

+0

感謝您的輸入。我想要的只是創建JSON的形式。我明白你分享的一點,但我沒有得到如何將乾淨的方式轉換成json(我的知識在前端是非常有限的)我也想了解,即使我的來自是正確的,並且支持我共享的Json格式 –

+0

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

+0

謝謝Tushar,I嘗試了你分享的內容,它讓我接近我所尋找的東西,但不是我確切需要的東西。這是給我 { 「問題」: 「ttttdd」, 「ansSet」:{ 「0」:{ 「providedOption」: 「廣告」, 「isRightOption」:真 }, 「1」: { 「providedOption」: 「ASDF」, 「isRightOption」:假 }, 「2」:{ 「providedOption」: 「RR」, 「isRightOption」:假 }, 「3」:{ 「providedOption」:「asdf」, 「isRightOption」:false } } } 但是,如果你看到我的結構是不一樣的。 –