Convertir les données du formulaire jquery en données json-Questions et réponses frontales-php.cn

Convertir les données du formulaire jquery en données json

PHPz

Libérer： 2023-05-28 14:43:38

original

1729 Les gens l'ont consulté

Avec le développement du développement front-end, de plus en plus de sites Web et d'applications ont modifié la méthode de soumission de formulaires, passant des requêtes synchrones traditionnelles aux requêtes asynchrones. Dans ce processus, le front-end doit convertir les données du formulaire au format JSON, puis les envoyer au back-end pour traitement via une requête Ajax. Et cela nécessite de maîtriser certaines technologies connexes.

Lorsque nous utilisons jQuery pour faire fonctionner le formulaire, nous pouvons convertir les données du formulaire au format JSON via le code suivant :

var formData = $('form').serializeArray(); // 将表单序列化为键值对数组
var jsonData = {};
$.each(formData, function() {
    if (jsonData[this.name]) { // 如果json中已经有了该属性，则将其转换为数组
        if (!jsonData[this.name].push) {
            jsonData[this.name] = [jsonData[this.name]];
        }
        jsonData[this.name].push(this.value || '');
    } else {
        jsonData[this.name] = this.value || ''; // 如果是第一次添加该属性，则直接加入json中
    }
});

Copier après la connexion

Dans le code ci-dessus, nous utilisons d'abord la méthode serializeArray() pour sérialiser le formulaire dans un tableau clé de paires de valeurs formData. Ensuite, nous créons un objet vide jsonData pour stocker les données JSON converties. Enfin, utilisez la méthode $.each() pour parcourir le tableau de données du formulaire et ajoutez chaque paire clé-valeur à jsonData. serializeArray()方法将表单序列化为一个键值对数组formData。接着我们创建一个空对象jsonData来存储转换后的JSON数据。最后使用$.each()方法遍历表单数据数组，并将每个键值对添加到jsonData中。

需要注意的是，上述代码中使用了判断语句来处理表单中键值对重复的情况，遇到重复的属性名时将其转换为数组，并将新的值添加到数组中。

完整的例子如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单数据转JSON数据</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $('form').submit(function(event) {
                event.preventDefault(); // 阻止表单提交
                var formData = $(this).serializeArray(); // 将表单序列化为键值对数组
                var jsonData = {};
                $.each(formData, function() {
                    if (jsonData[this.name]) { // 如果json中已经有了该属性，则将其转换为数组
                        if (!jsonData[this.name].push) {
                            jsonData[this.name] = [jsonData[this.name]];
                        }
                        jsonData[this.name].push(this.value || '');
                    } else {
                        jsonData[this.name] = this.value || ''; // 如果是第一次添加该属性，则直接加入json中
                    }
                });
                console.log(jsonData); // 打印转换后的JSON数据，可以通过Ajax请求发送到后端进行处理
            });
        });
    </script>
</head>
<body>
    <form>
        <label>姓名:</label>
        <input type="text" name="name" value="张三"><br>
        <label>性别:</label>
        <input type="radio" name="gender" value="male" checked>男
        <input type="radio" name="gender" value="female">女<br>
        <label>爱好:</label>
        <input type="checkbox" name="hobby" value="reading" checked>阅读
        <input type="checkbox" name="hobby" value="music">音乐
        <input type="checkbox" name="hobby" value="travel">旅游<br>
         <button type="submit">提交</button>
    </form>
</body>
</html>

Copier après la connexion

这样，我们就成功将表单数据转换为了JSON格式，并可以将其通过Ajax请求发送到后端。同时，需要注意的是，表单在提交之前需要阻止默认行为，这里我们使用了event.preventDefault()

Il convient de noter que le code ci-dessus utilise des instructions de jugement pour traiter les paires clé-valeur répétées sous la forme. Lorsque des noms d'attributs répétés sont rencontrés, ils sont convertis en tableaux et de nouvelles valeurs sont ajoutées au tableau. 🎜🎜L'exemple complet est le suivant : 🎜rrreee🎜De cette façon, nous avons réussi à convertir les données du formulaire au format JSON et pouvons les envoyer au backend via une requête Ajax. Dans le même temps, il convient de noter que le formulaire doit empêcher le comportement par défaut avant de le soumettre. Ici, nous utilisons la méthode event.preventDefault(). 🎜

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!