Добавление массива объектов для формирования данных - PullRequest
Новая
       2

Добавление массива объектов для формирования данных

0 голосов
/ 23 июня 2018

Следующие скрипты создают желаемую отправку в PHP:

index.php 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <form id="myform">
            <input type="text" value="Name 1" name="name1">
            <input type="text" value="Name 2" name="name2">
            <input type="text" value="Name 3" name="name3">

            <input type="text" value="Series 0 name" name="series[0][name]">
            <input type="text" value="Series 0 position" name="series[0][position]">
            <input type="text" value="Series 0 id" name="series[0][id]">

            <input type="text" value="Series 1 name" name="series[1][name]">
            <input type="text" value="Series 1 position" name="series[1][position]">
            <input type="text" value="Series 1 id" name="series[1][id]">

            <input type="text" value="Series 2 name" name="series[2][name]">
            <input type="text" value="Series 2 position" name="series[2][position]">
            <input type="text" value="Series 2 id" name="series[2][id]">

            <input type="submit">
        </form>
        <form id="form2">
            <input type="text" value="Name 1" name="name1">
            <input type="text" value="Name 2" name="name2">
            <input type="text" value="Name 3" name="name3">

            <input type="submit">
        </form>
        <script type="text/javascript">
            $(function(){
                function ajaxTest(data) {
                    console.log(data);
                    $.ajax({
                        type: "POST",
                        url: "testajax.php",
                        data: data,
                        dataType: 'json',
                        success: function (rsp){
                            console.log(rsp);
                        }
                    });
                }
                ajaxTest($('#myform').serializeArray());
            });
        </script>
    </body>
</html>

testajax.php 

<?php
ob_start();
var_dump($_POST);
syslog(LOG_INFO, ob_get_clean());
echo(json_encode($_POST));

syslog 

array(4) {
   ["name1"]=>
   string(6) "Name 1"
   ["name2"]=>
   string(6) "Name 2"
   ["name3"]=>
   string(6) "Name 3"
   ["series"]=>
   array(3) {
     [0]=>
     array(3) {
       ["name"]=>
       string(13) "Series 0 name"
       ["position"]=>
       string(17) "Series 0 position"
       ["id"]=>
       string(11) "Series 0 id"
     }
     [1]=>
     array(3) {
       ["name"]=>
       string(13) "Series 1 name"
       ["position"]=>
       string(17) "Series 1 position"
       ["id"]=>
       string(11) "Series 1 id"
     }
     [2]=>
     array(3) {
       ["name"]=>
       string(13) "Series 2 name"
       ["position"]=>
       string(17) "Series 2 position"
       ["id"]=>
       string(11) "Series 2 id"
     }
   }
 }

Но на самом деле моя форма содержит не все данные серии, а вместо этого она содержится в массиве JavaScript.Как я могу опубликовать его вместе с данными формы?Я не хочу использовать JSON.stringify, так как он требует декодирования на сервере. 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>test</title>
    </head>
    <body>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <form id="myform">
            <input type="text" value="Name 1" name="name1">
            <input type="text" value="Name 2" name="name2">
            <input type="text" value="Name 3" name="name3">

            <input type="submit">
        </form>
        <form id="form2">
            <input type="text" value="Name 1" name="name1">
            <input type="text" value="Name 2" name="name2">
            <input type="text" value="Name 3" name="name3">

            <input type="submit">
        </form>
        <script type="text/javascript">
            $(function(){
                function ajaxTest(data) {
                    console.log(data);
                    $.ajax({
                        type: "POST",
                        url: "testajax.php",
                        data: data,
                        dataType: 'json',
                        success: function (rsp){
                            console.log(rsp);
                        }
                    });
                }
                var series=[
                    {name:'Series 1 name', position:'Series 1 position', id:'Series 1 id'},
                    {name:'Series 2 name', position:'Series 2 position', id:'Series 2 id'},
                    {name:'Series 3 name', position:'Series 3 position', id:'Series 3 id'}
                ]
                var formData=$('#form2').serializeArray();
                formData.push({name: 'series', value: series});
                ajaxTest(formData);
            });
        </script>
    </body>
</html>

Ответы [ 2 ]

0 голосов
/ 23 июня 2018

Вы можете использовать .serialize() и $.param для создания закодированных строк и просто объединить их с амперсандом 

$(function(){
    function ajaxTest(data) {
        console.log(data);
        console.log(unescape(data));
                    
    }
    var series=[
                    {name:'Series 1 name', position:'Series 1 position', id:'Series 1 id'},
                    {name:'Series 2 name', position:'Series 2 position', id:'Series 2 id'},
                    {name:'Series 3 name', position:'Series 3 position', id:'Series 3 id'}
    ]
    var formData=$('#form2').serialize();
    var otherData = $.param({series:series});
    ajaxTest(formData+'&'+otherData);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform">
            <input type="text" value="Name 1" name="name1">
            <input type="text" value="Name 2" name="name2">
            <input type="text" value="Name 3" name="name3">

            <input type="submit">
        </form>
        <form id="form2">
            <input type="text" value="Name 1" name="name1">
            <input type="text" value="Name 2" name="name2">
            <input type="text" value="Name 3" name="name3">

            <input type="submit">
        </form>
0 голосов
/ 23 июня 2018

Мне не очень нравится этот ответ, так как я уверен, что есть более готовое решение, но оно работает (по крайней мере, в Chrome). 

function serializeData(name, arr){
    var a=[];
    for (var i = 0; i < arr.length; i++) {
        for (var key in arr[i]) {
            a.push({name: name+'['+i+']['+key+']', value: arr[i][key]});
        }
    }
    return a;
}
var formData=$('#form2').serializeArray().concat(serializeData('series', series));
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...