Ajax – Formularzuordnung-js-Tutorial-php.cn

Ajax – Formularzuordnung

坏嘻嘻

Freigeben： 2018-09-13 17:42:22

Original

1594 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!