将 JavaScript 数组传递给 PHP [关闭]

Question

我正在创建 Web 应用程序，其中有两个不同的列表。我已将列表转换为数组，并且我想将该数组从 JavaScript 传递到 PHP 以进行进一步分析。

这是一个类似于我的原始代码的示例

test_2.html

<form method="post" id="theform" action="test_2.php">
        <ul id="control">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul id="treatment">
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    <button>Submit</button>
</form>

<script>
    window.onload = function () {
        var form = document.getElementById('theform');
        var  lst = [];
        var lst2 = [];
        form.addEventListener('submit', function () {
            var lis1 = document.querySelectorAll('#control li');
            for (var i = 0; i < lis1.length; i++) {
                lst.push(+lis1[i].innerText);
            }

            var lis2 = document.querySelectorAll('#treatment li');
            for (var i = 0; i < lis2.length; i++) {
                lst2.push(+lis2[i].innerText);
            }
            var array = [lst, lst2]

            $.ajax({
                type: "POST",
                url: "php/test_2.php",
                data: {"data":array},
                datatype: "json",
                success: function(response){
                    alert("response " + response);
                }
            });
    }
</script>

test_2.php

$sub_array = var_dump($_POST['data']);
echo $sub_array;

问题是我无法传递数组。我已经尝试过我的事情，也确实提到了很多问题：-

Get all LI elements in array

how to use JSON.stringify and json_decode() properly

Passing Javascript array to PHP file

Get response from PHP file using AJAX 和更多

Answer 1

尝试在提交功能上添加阻止默认值。它将停止表单提交并且 Ajax 将触发。

<form method="post" id="theform">
        <ul id="control">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <ul id="treatment">
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
        <button>Submit</button>
    </form>
    
    <script>
        window.onload = function () {
            var form = document.getElementById('theform');
            var lst = [];
            var lst2 = [];
            form.addEventListener('submit', function (e) {
                e.preventDefault();
                var lis1 = document.querySelectorAll('#control li');
                for (var i = 0; i < lis1.length; i++) {
                    lst.push(+lis1[i].innerText);
                }
    
                var lis2 = document.querySelectorAll('#treatment li');
                for (var i = 0; i < lis2.length; i++) {
                    lst2.push(+lis2[i].innerText);
                }
                var array = [lst, lst2];
    
    
                $.ajax({
                    type: "POST",
                    url: "php/test_2.php",
                    data: {'data':array},
                    datatype: "json",
                    success: function (response) {
                        alert("response " + response);
                    }
                });
            });
        }
    </script>

Answer 2

您在 Javascript 中有一些语法错误，并调用了 2 次页面 text_2.php，一次在 <form> 中，第二次在 ajax 调用中。

test_2.html

<form method="post" id="theform">
    <ul id="control">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul id="treatment">
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>
    <button>Submit</button>
</form>

<script>
    window.onload = function () {
        var form = document.getElementById('theform');
        var lst = [];
        var lst2 = [];
        form.addEventListener('submit', function () {
            var lis1 = document.querySelectorAll('#control li');
            for (var i = 0; i < lis1.length; i++) {
                lst.push(+lis1[i].innerText);
            }

            var lis2 = document.querySelectorAll('#treatment li');
            for (var i = 0; i < lis2.length; i++) {
                lst2.push(+lis2[i].innerText);
            }
            var array = [lst, lst2];


            $.ajax({
                type: "POST",
                url: "php/test_2.php",
                data: {'data':array},
                datatype: "json",
                success: function (response) {
                    alert("response " + response);
                }
            });
        });
    }
</script>

test_2.php

<?php

var_dump($_POST['data']);

Answer 3

JSON.stringify(array) 以 JSON 格式传递数组。

使用 preventDefault() 因为 preventDefault() 将阻止 HTML 表单提交并允许 $.ajax 提交表单。 在您的情况下，您没有使用 preventDefault()，因此不会触发 ajax 并且表单正在通过 HTML 表单操作提交。

另外请注意，我在 addEventListener 的回调函数中传递了 e。使用它来调用 preventDefault()。 （你可以使用任何名字）

form.addEventListener('submit', function (e) {
                e.preventDefault(); //This will halt the submission
                var lis1 = document.querySelectorAll('#control li');
                for (var i = 0; i < lis1.length; i++) {
                    lst.push(+lis1[i].innerText);
                }
    
                var lis2 = document.querySelectorAll('#treatment li');
                for (var i = 0; i < lis2.length; i++) {
                    lst2.push(+lis2[i].innerText);
                }
                var array = [lst, lst2];
    
                $.ajax({
                    type: "POST",
                    url: "php/test_2.php",
                    data: {"data":JSON.stringify(array)}, //This will convert JSON to array
                    datatype: "json",
                    success: function(response){
                        alert("response " + response);
                    }
                });
            });

PHP内部使用，

$data = json_decode($_POST["data"]);