Heim > Artikel > Web-Frontend > Ajax – Formularzuordnung

Ajax – Formularzuordnung

坏嘻嘻Original: 2018-09-13 17:42:221561Durchsuche

Das Beispiel in diesem Artikel beschreibt die Python-Zuordnungsliste. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

1 Bei der Zuordnung von Serialisierung zu Hintergrund-Entitätsobjekten gibt es viele Umwege, die wie folgt zusammengefasst werden.

Formular:

<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-Methode:

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;
    }

Es sollte beachtet werden, dass warum nicht serialize() direkt zum Serialisieren des Formulars verwendet werden sollte? Habe immer noch dieses Problem. Als ich es tat, gab $("#form").serialize() die Form name=1&password=1 zurück. Ich weiß nicht, wie jquery es so serialisiert, aber ohne Erfolg . Ich habe einen Blog gesehen, http://www.cnblogs.com/suruozhong/p/6256457.html, dieses seltsame Serialisierungsergebnis durch Ändern der Zeichen in JSON-Form konvertieren und dann OK, danke Blogger.
Backend-Controller:

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

Es ist zu beachten, dass durch das Hinzufügen von @RequestBody vor dem Objekt die Front-End-JSON-Daten dem Objekt zugeordnet werden, andernfalls wird eine Reihe von Fehlern gemeldet:

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

Es kann jedoch sein, dass Ihr Entitätsname nicht mit dem Namensattributwert im Tag übereinstimmt, was diesen Fehler verursacht.
Wenn das Formular nicht der Hintergrundentität zugeordnet werden kann, liegt dies möglicherweise am fehlenden Regalpaket

<!-- 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 Senden Sie das Formular direkt in der Methode

<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 Konvertieren Sie das Formular an FormData senden und es dann als JSON senden

<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>

Verwandte Empfehlungen:

Probleme mit dem Form Submit Mapping Servlet in jsp_html/css_WEB-ITnose

Beispielanalyse einer Python-Zuordnungsliste

Das obige ist der detaillierte Inhalt vonAjax – Formularzuordnung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Bringen Sie Ihnen bei, wie Sie eine einfache Website erstellen: Python-Entwicklungs-WebserverNächster Artikel：Bringen Sie Ihnen bei, wie Sie eine einfache Website erstellen: Python-Entwicklungs-Webserver

In Verbindung stehende Artikel

Mehr sehen