Ajax--양식 매핑-JS 튜토리얼-php.cn

Ajax--양식 매핑

坏嘻嘻

풀어 주다： 2018-09-13 17:42:22

원래의

1616명이 탐색했습니다.

이 문서의 예에서는 Python 매핑 목록을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

1 백그라운드 엔터티 객체에 양식 직렬화를 매핑하는 데 많은 우회가 있으며 이를 요약하면 다음과 같습니다.

양식:

<form  id="form01" enctype="multipart/form-data">
        <input type="text" name="name" id="name"/> 
        <input type="text" name="password" id="password"/>
        <input type="button" value="确认" onclick="upload()">
    </form>

로그인 후 복사

JS 방법:

function upload() {
        $.ajax({
            type:"POST",
            url : &#39;<%=basePath%>upload01.do&#39;, //用于文件上传的服务器端请求地址
            data : formToJson($("#form01")),
            contentType: &#39;application/json; charset=utf-8&#39;,
            success : function(data, status) //服务器成功响应处理函数
            {
                alert(data);
            },
            error : function(data, status, e)//服务器响应失败处理函数
            {
                alert(e);
            }
        });
    }    //将表单数据转化为JSON数据 form为表单对象，如$("#form01"),返回序列化数据
    function formToJson(form) {
        var data = form.serialize();
        data = decodeURIComponent(data, true);//防止中文乱码  
        data = data.replace(/&/g, "&#39;,&#39;");
        data = data.replace(/=/g, "&#39;:&#39;");
        data = "({&#39;" + data + "&#39;})";
        obj = eval(data);
        obj=JSON.stringify(obj);        return obj;
    }

로그인 후 복사

양식을 직렬화하기 위해 serialize()를 직접 사용하지 않는 이유는 무엇입니까? 아직도 이런 문제가 있습니다. 내가 이를 수행했을 때 $("#form").serialize()는 name=1&password=1 형식을 반환했습니다. jquery가 어떻게 이렇게 직렬화할 수 있는지 모르겠습니다. 오랫동안 온라인에서 검색했지만 소용이 없었습니다. .http://www.cnblogs.com/suruozhong/p/6256457.html이라는 블로그를 보았는데, 이 이상한 직렬화 결과를 문자를 변경하여 JSON 형식으로 변환한 다음 OK, 블로거님 감사합니다.
백엔드 컨트롤러:

@RequestMapping(value = "upload01", method = RequestMethod.POST)    public void uploadText01(
            HttpServletRequest request,
            HttpServletResponse response,
            @RequestBody User user) {
        System.out.println("run in");
    }

로그인 후 복사

객체 앞에 @RequestBody를 추가하면 프런트엔드 JSON 데이터가 객체에 매핑된다는 점에 유의해야 합니다. 그렇지 않으면 일련의 오류가 보고됩니다.

Unsupported Media TypeContent type &#39;application/json;charset=UTF-8&#39; not supported

로그인 후 복사

그러나 이는 귀하의 것일 수도 있습니다. 엔터티 이름 태그의 이름 속성 값과 일치하지 않으면 이 오류가 발생합니다.
양식을 배경 엔터티에 매핑할 수 없는 경우 선반 패키지가 부족하기 때문일 수 있습니다.

<!-- JSON支持 -->
        <dependency>
            <groupId>net.sf.json-lib</groupId>
            <artifactId>json-lib</artifactId>
            <!--指定jdk版本 -->
            <classifier>jdk15</classifier>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
        </dependency>

로그인 후 복사

2 메서드에서 직접 양식을 제출합니다.

<form id="form01" enctype="multipart/form-data">
        <input type="text" name="name" id="name" /> <input type="password"
            name="password" id="password" /> <input type="button"
            onclick="doConfirmForm()" value="确认">
    </form>

로그인 후 복사

function doConfirmForm(){
        var form01=$("#form01");
        form01.submit();
    }

로그인 후 복사

3 양식을 FormData로 변환한 다음 JSON으로 제출합니다

<body>
    <form id="form">
            name:<br>
        <input type="text" name="name">
        <br>
         password:<br>
        <input type="text" name="password">
    </form> </body><script type="text/javascript" src="./jquery-1.10.2.js"></script><script type="text/javascript">

            var formData = new FormData($("#form")[0]);
            formData.append("createDate",new Date());

            $.ajax({
                type: "POST",
                data: convertFormDataToJson(formData),
                url: "http://localhost:80/test/requestBody",
                contentType: &#39;application/json; charset=utf-8&#39;,
                dataType: "json",
                success: function(result) {
                    console.log(result);
                }
            });            function convertFormDataToJson(formData) {
                var objData = {};                for (var entry of formData.entries()){
                    objData[entry[0]] = entry[1];
                }                return JSON.stringify(objData);
            }    </script>

로그인 후 복사