2017-02-13 5 views
1

В то время как самообучение я пришел к моменту, мне нужно отправить форму.Форма JSP Подача с JSON

У меня есть контроллер 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); 
     } 
    }) 
    }); 
}); 

Do Прочитайте ссылки для лучшего понимания: -

+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": "р-р", "isRightOption": ложные }, "3": { "providedOption": "asdf", "isRightOption": false } } } Но если вы видите мою структуру, это не одно и то же. –