Front and Back End Reference Problems and Solutions in springboot

About org.springframework.web.HttpMediaTypeNotSupportedException: Content type'application/x-www-form-urlencoded;charset=UTF-8'not supported and Could not read document: Unrecognized token': was expecting ('true','false'or'null') exception resolution*

##Question##
Recently, when I was writing a springboot project, I encountered a pass-by problem when I first wanted to pass the id of the selected user (batch) to the back-end controller method in a check box of a jsp page (this project uses native js directly, no front-end separation) and I didn't know how to pass in and accept parsed batch data

Reason: Can not read document: Unrecognized token'*': was expecting ('true','false'or'null') exception because the annotations used when the backend receives do not match, that is, RequestBody cannot parse multipart and form-data data data data data data data data data, it needs to be parsed with RequestParam, refer to this blog: https://blog.csdn.net/suxiexingchen/article/details/81214131

##About org.springframework.web.HttpMediaTypeNotSupportedException: Content type'application/x-www-form-urlencoded;charset=UTF-8'not supported Many other blogs can find it, add a sentence to the ajax request: contentType:'application/json;charset=UTF-8',:
Code slice.

// An highlighted block
$.ajax({
            url: url,
            type: 'post',
            contentType: "application/json;charset=UTF-8",
        });

Solutions for batch parameter delivery:

Store the selected user ID in an array (as long as the ID is passed, other information can be found in the back end by ID). Part of the jsp code is as follows:

Code slice.

//Form Part
<body>
<div align="center">
    <form action="${PageContext.request.getContextPath}/testboot/batchaddper" method="POST">
        <table border="1" style="background-color: dodgerblue">
            <tr>
            //Use here to control all selections
                <td><input id="c" type="checkbox" name="selectall" onclick="selectAll()">Select All</td>
            </tr>
            <tr><c:forEach items="${user_list}" var="uList" varStatus="ind"></tr>
            <tr><td><input type="checkbox" name="u_list" onclick="toCheck()" value="${uList.id}">
                    <c:if test="$ind.index==1">checked="checked"</c:if></td>
                <td style="background-color: deepskyblue">${uList.id}</td>
                <td style="background-color: darkgrey">${uList.u_name}</td>
                <td style="background-color: gray">${uList.username}</td>
            </c:forEach>
            </tr>
        </table>
        //The following is a drop-down selection box that needs to pass an id
        <select>
            <c:forEach items="${per_list}" var="plist">
                <option id="perid" value="${plist.id}">${plist.r_name}</option>
            </c:forEach>
        </select>
        <input type="button" id="submit"  value="add permission">
    </form>
</div>
</body>

Here is part of the js code:
Code slice.

//Remember to introduce jQuery
<script src="/js/jquery-3.4.1.min.js"></script>
<script language="JavaScript" type="text/javascript">

    $("#submit").click(function(){
        var url = $('form').attr("action");
        //Define an array
        var uid = [];
        //Gets the value of the selected row of forms
        $("input:checkbox:checked").each(function(i){
            if($(this).val()=="on"){
            //If the full selection will have multiple "on" strings, you need to decide to eliminate
            }else{
                uid[i] = $(this).val();
            }
        });
        var pid = $("#perid").val();

        // console.log($("input:checkbox:checked"));
        $.ajax({
            url: url,
            type: 'post',
            datatype: "json",
            //Pass multiple parameters enclosed in {}
            data: {"id":uid,"pid":pid},
            success: function (s) {
                alert("s",s);
            },
            error: function (e) {
                alert(e.responseText);
            }
        });
    })
    </script>

Backend controller method acceptance section:

Code slice.

//Note the uniformity of request types, POST and GET
 @RequestMapping(value = "/batchaddper", method = RequestMethod.POST)
    public ModelAndView batchaddper(@RequestParam(value ="User", required = false) List<User> list,int pid){
    //If there is no error, you can call your service method to pass in list and pid for database operation.
        ModelAndView mv = new ModelAndView();
        mv.setViewName("/successActionPage");
        return mv;
    }

If the front end passes to the back end a string, for example, if you use JSON.stringify to convert what you want to pass into a string, it is recommended that the back end learn about fast JSON instead of writing its own algorithm to break things out of the string. These troubles will be taken into account by framers.

Export and Import

export

If you want to try this editor, you can edit it anywhere in this article.When you have finished writing an article, find the article export in the toolbar above and generate a.md file or.html file to save locally.

Import

If you want to load a.md file that you have written, you can choose the import function in the toolbar above to import the file with the corresponding extension.
Continue with your creation.

Keywords: JSON JSP JQuery Javascript

Added by Tjorriemorrie on Fri, 30 Aug 2019 05:46:56 +0300

Programming VIP