2017-02-01 11 views
0

@RequestBodyと注釈されたSpringコントローラのオブジェクトのリストをバインドしようとしています。テンプレートエンジンにThymeleafを使用しています。私はKotlinプログラミング言語を使用しています。私はjQueryを使ってJSON形式に変換し、フォームを送信するとここでフォーム提出のオブジェクトリストをスプリングにバインドする方法@RequestBody with Thymeleaf

は、HTMLコード

<form class="attendanceBook" id="form_submit" role="form" method="post" action="/attendances"> 
       <table class="table table-striped"> 
        <th>Role Number</th> 
        <th style="width: 30%">Student Name</th> 
        <th>Present</th> 
        <div th:each="std, stat : ${studentList}" class="separator"> 
         <tr> 
          <td th:text="${std.roleNumber}"></td> 
          <td th:text="${std.studentName}"></td> 
          <td><input type="checkbox" th:name="|i[__${stat.index}__]|" id="i" /></td> 
          <td><input type="text" th:name="|t[__${stat.index}__]|" th:value="*{studentList[__${stat.index}__].studentId}"/> </td> 
         </tr> 
        </div> 
       </table> 
       <input type="submit" id="submit_btn" value="Click"/> 
      </form> 

です。フォームデータをJsonに変換するJavaScript部分のみです。

var genFormSubmitParams = function (context) { 
    var _this = $(context), 
     data = {}; 
    _this.find('[name]').each(function (index, value) { 
     var _this = $(this), 
      name = _this.attr('name'), 
      value = _this.val(); 
     data[name] = value; 
    }); 
    var params = {}; 
    params["data"] = JSON.stringify(data); 
    console.log(params["data"]); 
    return params; 
}; 

ここはコントローラです。

@PostMapping 
fun patchAttendance(@RequestBody attendanceJson: AttendanceJsonWrapper): ResponseEntity<*> { 
{ 
    logger.info("attendanceJson list size {}", attendanceJson.attendanceJsons?.size) 
    logger.info("attendanceJson {}", attendanceJson) 

    return responseOK(attendanceJson) 
} 

これは私は1つの単一の行をバインドする必要のあるデータ・クラスです。

data class AttendanceJson (
    var i: String = "", 
    var t: String = "" 
) 

次に、オブジェクトのリストの実際のデータクラスのラッパークラスを示します。私はこれをJavaで書いた。

public class AttendanceJsonWrapper { 
List<AttendanceJson> attendanceJsons; 

public AttendanceJsonWrapper() { 
} 

public AttendanceJsonWrapper(List<AttendanceJson> attendanceJsons) { 
    this.attendanceJsons = attendanceJsons; 
} 

public List<AttendanceJson> getAttendanceJsons() { 
    return attendanceJsons; 
} 

public void setAttendanceJsons(List<AttendanceJson> attendanceJsons) { 
    this.attendanceJsons = attendanceJsons; 
} 
} 

私にはJavaScriptコンソールを掲示していますログに

{"i[0]":"on","t[0]":"90","i[1]":"on","t[1]":"106"} 

をこれを示す。しかし、それは、オブジェクトとしてデータクラスAttendanceJsonに結合されていません。 attendanceJsonsのリストはnullのままですが、ajax呼び出しは成功しています。

このオブジェクトリストをバックエンドにバインドするにはどうすればよいですか?前もって感謝します。

答えて

0

$("form").submit(function(event) { console.log($(this).serializeArray()); event.preventDefault(); });

https://api.jquery.com/serializeArray/

jqueryのから .serializeArray()を試してみてください
関連する問題