首頁 > web前端 > js教程 > Ajax--表單映射

Ajax--表單映射

坏嘻嘻
發布: 2018-09-13 17:42:22
原創
1588 人瀏覽過

本文實例講述了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
登入後複製

不過有可能是你的實體名稱與標籤中的name屬性值不符導致這種錯誤。
出現表單無法對應到後台實體還有可能是缺少架包的原因,

<!-- 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 Form表單轉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>
登入後複製

相關建議:

jsp中 表單submit提交映射Servlet的問題_html/css_WEB-ITnose

python映射清單實例分析

以上是Ajax--表單映射的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板