Spring MVC – jQuery Ajaxのリファクタリングの例

getdocs

4年前

jQuery AjaxフォームのPOSTとSpring MVCの例を見て、以下のパターンを見つけてください:

<script>
  jQuery(document).ready(
    function($) {

      $("#btn-save").click(function(event) {

        var id = $('#id').val();
        var domain = $('#domain').val();
        var name = $('#name').val();
        var desc = $('#desc').val();
        var tags = $('#tags').val();
        var afflink = $('#afflink').val();
        var cdn = $("#cdn").prop("checked") ? true : false;
        var hosting = $("#hosting").prop("checked") ? true : false;
        var paas = $("#paas").prop("checked") ? true : false;
        var display = $("#display").prop("checked") ? true : false;
        var imageUrl = $('#imageUrl').val();
        var favUrl = $('#favUrl').val();
        var whoisPattern = $('#whoisPattern').val();

        $("#btn-save").prop("disabled", true);

        $.post("/path-to/hosting/save", {
            id : id,
            domain : domain,
            name : name,
            desc : desc,
            tags : tags,
            afflink : afflink,
            display : display,
            hosting : hosting,
            cdn : cdn,
            paas : paas,
            imageUrl : imageUrl,
            favUrl : favUrl,
            whoisPattern : whoisPattern
        }, function(data) {

            var json = JSON.parse(data);
           //...

        }).done(function() {
        }).fail(function(xhr, textStatus, errorThrown) {
        }).complete(function() {
            $("#btn-save").prop("disabled", false);

        });

    });

  });
</script>

Spring MVCでは、 `@ RequestParam`を使ってAjax POSTデータを受け入れます。

    @RequestMapping(value = "/path-to/hosting/save", method = RequestMethod.POST)
    @ResponseBody
    public String saveHosting(
        @RequestParam int id, @RequestParam String domain, @RequestParam String name,
        @RequestParam String desc, @RequestParam String tags, @RequestParam String afflink,
        @RequestParam boolean display, @RequestParam boolean hosting,
        @RequestParam boolean cdn, @RequestParam boolean paas,
        @RequestParam String imageUrl, @RequestParam String favUrl,
        @RequestParam String whoisPattern
    ) {
       //...do something
    }

上記のコードは正常に動作していますが、ちょっと変わったし、保守が難しいです。

Javascript
$。post 'とSpring MVC
@ RequestParam`は多すぎるパラメータを扱っています。

1.リファクタリングJavaScript

Javascriptでは、 `$ .ajax`を使い、すべてを配列に格納し、Spring MVCにPOSTします。

<script>
  jQuery(document).ready(
    function($) {

        $("#btn-save").click(function(event) {

            var data = {}
            data["id"]= $("#id").val();
            data["domain"]= $("#domain").val();
            data["name"]= $("#name").val();
            data["desc"]= $("#desc").val();
            data["tags"]= $("#tags").val();
            data["afflink"]= $("#afflink").val();
            data["cdn"]= $("#cdn").prop("checked") ? true : false;
            data["hosting"]= $("#hosting").prop("checked") ? true : false;
            data["paas"]= $("#paas").prop("checked") ? true : false;
            data["display"]= $("#display").prop("checked") ? true : false;
            data["imageUrl"]= $("#imageUrl").val();
            data["favUrl"]= $("#favUrl").val();
            data["whoisPattern"]= $("#whoisPattern").val();

            $("#btn-save").prop("disabled", true);

            $.ajax({
                     type: "POST",
                     contentType: "application/json",
                     url: "/path-to/hosting/save",
                     data: JSON.stringify(data),
                     dataType: 'json',
                     timeout: 600000,
                     success: function (data) {
                         $("#btn-update").prop("disabled", false);
                        //...
                     },
                     error: function (e) {
                         $("#btn-save").prop("disabled", false);
                        //...
                     }
            });


        });

    });
</script>

2.リファクタリングSpring MVC

2.1 Ajax POSTデータを格納するためのPOJOを作成します。

public class HostingForm {

    private boolean display;
    private boolean cdn;
    private boolean hosting;
    private boolean paas;
    private String whoisPattern;
    private long id;
    private String domain;
    private String name;
    private String desc;
    private String tags;
    private String affLink;
    private String imageUrl;
    private String favUrl;

   //getters and setters

2.2 `@ RequestBody`でAjax POSTデータを受け入れます。

@RestController//...

    @RequestMapping(value = "/path-to/hosting/save", method = RequestMethod.POST)
    public String updateHosting(@RequestBody HostingForm hostingForm) {
       //...
    }

@ RequestBody`では、Springは自動的にPOSTデータを
HostingForm` POJO（名前で）にマップします。完了しました。