ajax
1//<![CDATA[
2$(function(){
3    $('#ajax').on('click',function(){
4
5        
6        $.ajax({
7            url:'/search',
8            type:'GET',
9            dataType: 'json',
10            data:{
11                'Year':$('#Year').val(),
12                'Name':$('#Name').val()
13            }
14        })
15        .done( (searchResult) => {
16            console.log("成功");
17            console.log("formList:" + searchResult);
18            console.log("form:" + searchResult);
19 
20            $('.result').html(searchResult);
21            console.log(searchResult);   console.log(searchResult);
22            
23            
24            $('.result').append('<tr><td>' + testingDateFrom + '</td><td>' + testingDateTo + '</td><td>' + competitionName + '</td><td>' + kitSendPrefecture + '</td><td>' +buttonHTML+ associationName + '</td><td>' +buttonXML+ subAssociationName + '</td></tr>')
25          
26        })
27

json
1var result = [
2{"testingDateFrom":"1", "testingDateTo":"2","competitionName":"3", "kitSendPrefecture":"4","associationName":"5", "subAssociationName":"6"}
3];
4

ajaxのappendをjsonのデータでappendしたいのですが、できません。
コントローラーでどのような処理が必要なのか、教えていただけないでしょうか？
$('.result').append('<tr><td>' + testingDateFrom + '</td><td>' + testingDateTo + '</td><td>' + competitionName + '</td><td>' + kitSendPrefecture + '</td><td>' +buttonHTML+ associationName + '</td><td>' +buttonXML+ subAssociationName + '</td></tr>')

})

行動規範の内容に同意します

回答2件

JSONと書かれているデータがJSON型ではありません

sample

まずはこうしてみてください

javascript
1<script>
2$(function(){
3  $('#ajax').on('click',function(){
4    $.ajax({
5    url:'test.json',
6    type:'GET',
7    dataType: 'json',
8    data:{
9      'Year':$('#Year').val(),
10      'Name':$('#Name').val()
11      },
12    }).done( (searchResult) => {
13      console.log("成功");
14      console.log(searchResult);
15      $('.result').html(JSON.stringify(searchResult));
16    });
17  });
18});
19</script>
20<input type="button" value="ajax" id="ajax">
21<div class="result"></div>

test.json

json
1[{"testingDateFrom":"1", "testingDateTo":"2","competitionName":"3", "kitSendPrefecture":"4","associationName":"5", "subAssociationName":"6"}]

投稿2019/10/10 09:15

編集2019/10/10 09:23

yambejp

総合スコア116694

退会済みユーザー

2019/10/11 00:15

ご回答いただき本当に有難うございます！！いつも勉強になります！！

行動規範の内容に同意します

ベストアンサー

望んでいる値が、Controllerから testingDateFrom や testingDateTo などのJSONを返すのであれば、RestControllerを利用すれば簡単です。

java
1import org.springframework.web.bind.annotation.RequestMapping;
2import org.springframework.web.bind.annotation.RestController;
3
4@RestController
5@RequestMapping("/search")
6public class SampleRestController {
7  public ResponseData search() {
8    ResponseData responseData = new ResponseData();
9    // .... responseDataの値を設定
10    return responseData;
11  }
12}

java
1public class ResponseData {
2  private String testingDateFrom;
3  private String testingDateTo;
4  // get/setメソッド
5}

とした上で、JavaScript(jQueryのAjax)は、

JavaScript
1.done( (searchResult) => {
2            $('.result').append('<tr><td>' + searchResult.testingDateFrom + '</td><td>' + searchResult.testingDateTo + '</td><td>' ....... )
3})