Jqueryのajaxを使ってSpringBootのRESTコントローラーにデータを渡したい
解決したいこと
jQueryのajaxを使ってSpringBootのRESTコントローラーにデータを渡したい
発生している問題・エラー
SpringBootでjQuery経由でRESTを使用してデータベース更新を行うプログラムの中で
htmlのデータをコントローラーに引き渡す箇所でスタックしています。
・①コードの★①部分/htmlのformタグ内のデータをjqueryで抽出→OK
・ajaxの処理は指定のコントローラーに移っています。
・②コードの★②部分/@RestControllerメソッドでデータを受け取る→ここがNG
のような状況です。
③はhtmlのデータを受け取るフォームクラスです。
詳細は以下のコードをご参照いただければと思います。
質問が拙く申し訳ないのですが、ご教授いただければ幸いです。
何卒、宜しくお願いいたします。
該当するソースコード (「→→→」は出力結果)
①detail.js (htmlからformデータを抽出しajax処理を行う)
★①の箇所をご覧いただければと思いますが、htmlからデータは取れています。
/**
* pdetail.htlmの変更ボタンを押した時に、画面データをデータベースにupdateする処理
*/
'use strict'
/**画面ロード時の処理 */
jQuery(function($){
$('#btn-alteration').click(function(event){
update();
});
});
function update(){
//htmlのformタグ内のinputタグ情報を取得
let programForm=$('#programdetail-form').serialize();
console.log('#programdetail-form='+programForm);
//★①この部分のログを確認すると
//→→→programname=test1&programcode=111&inUse=2
//とhtmlのformタグの情報が取れています。
$.ajax({
type:'PUT',
//コントローラのurlパターン
url:'/rest/alteration',
//ここで★①のデータを渡す
data:programForm,
dataType:'json',
contentType:'application/json;charset=UTF-8',
cache:false,
timeout:5000,
}).done(function(data){
alert('情報を変更します。\n一覧画面で結果を確認して下さい。');
window.location.href='/programlist';
}).fail(function(jqXHR,textStatus,errorThrown){
alert('通信エラー');
}).always(function(){
});
}
②DetailRestController.java(htmlのデータを引き取り処理するクラス)
★②の箇所をご覧いただければと思いますが、引数で受け取ったオブジェクトのtoString()の結果は、全プロパティがnullとなっています。
import org.modelmapper.ModelMapper;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import lombok.AllArgsConstructor;
import test.form.ProgramForm;
import test.model.ProgramData;
import test.service.ProgramDataService;
@RequestMapping("/rest")
@RestController
@AllArgsConstructor
public class ProgramDataRestController {
private ProgramDataService programDataService;
private ModelMapper modelMapper;
@PutMapping("/alteration")
//ProgramFormクラスはhtmlのデータを抽出するフォームクラス(③参照)
public int putAltProgramData(ProgramForm programForm){
//★②ここで引数のprogramFormオブジェクトを出力
System.out.println("programForm="+programForm);
//→→→ProgramForm(programname=null, programcode=null, inUse=null)
//となっており、★①のデータが届いていません。
//フォームデータをエンティティにマッピング
ProgramData data=modelMapper.map(programForm,ProgramData.class);
//doUpdate()は、mysql のUPDATE句。WHEREはprogramcode。
//戻り値は更新されたデータの数
int result = programDataService.doUpdate(data);
System.out.println("result="+result);
//→→→programcode=nullのため、update対象レコードなしということで
//→→→result=0
return result;
}
}
③ProgramForm.java(htmlのデータを受け取るフォームクラス)
import javax.validation.constraints.NotBlank;
import lombok.Data;
@Data
public class ProgramForm {
@NotBlank
private String myprogramcode;
private String programname;
private Integer inUse;
}
自分で試したこと
・①detail.jsでhtmlフォームタグのデータ取得をserialize()からserializeArray()にしてみましたが、結果は変わりませんでした。
let programForm=$('#programdetail-form').serializeArray();
・②DetailRestController.javaのputAltProgramData()メソッドの引数内に@RequestParam("programForm")を付加してみましが、結果は変わりませんでした。
@PutMapping("/alteration")
public int putAltProgramData(@RequestParam("programForm") ProgramForm programForm)