Ajax – mappage de formulaire-js tutoriel-php.cn

Ajax – mappage de formulaire

坏嘻嘻

Libérer： 2018-09-13 17:42:22

original

1586 Les gens l'ont consulté

L'exemple de cet article décrit la liste de mappage Python. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

1 Il existe de nombreux détours dans le mappage de la sérialisation des formulaires aux objets d'entité d'arrière-plan, qui sont résumés comme suit.

Formulaire :

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

Copier après la connexion

Méthode 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;
    }

Copier après la connexion

Il est à noter que pourquoi ne pas utiliser directement serialize() pour sérialiser le formulaire ? J'ai toujours ce problème. Quand je l'ai fait, $("#form").serialize() a renvoyé le formulaire name=1&password=1. Je ne sais pas comment jquery peut le sérialiser comme ça, j'ai cherché en ligne pendant longtemps, mais en vain. . J'ai vu un blog, http://www.cnblogs.com/suruozhong/p/6256457.html, convertir cet étrange résultat de sérialisation en forme JSON en changeant les caractères, puis OK, merci blogueur.
Contrôleur backend :

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

Copier après la connexion

Il est à noter qu'en ajoutant @RequestBody devant l'objet, les données JSON dans le frontend seront mappées à l'objet, sinon une série d'erreurs sera signalé :

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

Copier après la connexion

Cependant, il se peut que le nom de votre entité ne corresponde pas à la valeur de l'attribut name dans la balise, provoquant cette erreur.
La raison pour laquelle le formulaire ne peut pas être mappé à l'entité d'arrière-plan peut être due à l'absence de package d'étagère

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

Copier après la connexion

2 Soumettez le formulaire directement dans la méthode

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

Copier après la connexion

<🎜. >

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

Copier après la connexion

3 Formulaire Convertissez le formulaire en FormData, puis soumettez-le à 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>

Copier après la connexion

Recommandations associées :

Problème avec le mappage de soumission de soumission de formulaire Servlet dans jsp_html/css_WEB- ITnose

Exemple d'analyse de liste de mappage Python

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!