Maison >interface Web >js tutoriel >Ajax – mappage de formulaire

Ajax – mappage de formulaire

坏嘻嘻original: 2018-09-13 17:42:221588parcourir

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>

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

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

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

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>

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>

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

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Apprenez à créer un site Web simple : serveur Web de développement PythonArticle suivant：Apprenez à créer un site Web simple : serveur Web de développement Python

Articles Liés

Voir plus