通过 xmlhttprequest 传递数组答案

【问题标题】：passing array through xmlhttprequest通过 xmlhttprequest 传递数组
【发布时间】：2020-06-06 18:34:56
【问题描述】：

在下面的代码中，我试图将用户输入的所有标记传递到另一个页面以执行，但只有在表中输入的第一个标记的值是发送的。有没有办法发送所有的值输入的标记，而不仅仅是第一个值；

<!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            function send(){
                var marks=document.getElementById("marks").value;
                var xmlhttp=new XMLHttpRequest()
                xmlhttp.onreadystatechange=function()
                {
                if(this.readyState==4 &&this.status==200)
                {
                document.getElementById("result").innerHTML=this.responseText;
                }
                };
                xmlhttp.open('GET','mark.php?marks='+marks,true);
                xmlhttp.send();
            }
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>name</td>
                <td>marks</td>
            </tr>
            <tr>
                <td><input type="text" ></td>
                <td><input type="number" id ="marks"></td>
            </tr>
            <tr>
                <td><input type="text" ></td>
                <td><input type="number" id ="marks"></td>
            </tr>
            <tr>
                <td><input type="text" ></td>
                <td><input type="number" id ="marks"></td>
            </tr>
        </table>
        <button onlick="send()" >submit</button>
        <div id='result'><p></p><div>
    </body>
</html>

【问题讨论】：

ID 属性必须是唯一的 - 所以拥有两个或更多 marks 是不正确的

标签： javascript php ajax xmlhttprequest

【解决方案1】：

如果您从数字输入中删除ID 属性，您可以使用querySelectorAll 以适当的模式获得对所有这些属性的引用。获得该节点列表引用后，您可以遍历以查找值并根据需要使用。

在那之后你应该可以很容易地处理marks.php 中的$_GET['marks']..

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function send(){
                var marks=[];

                /* Find all the input elements that are considered `marks` and assign their values to an array */
                Array.from( document.querySelectorAll('input[type="number"]') ).forEach( input=>{
                    marks.push( input.value );
                });


                var xmlhttp=new XMLHttpRequest()
                    xmlhttp.onreadystatechange=function(){
                        if( this.readyState==4 &&this.status==200 ){
                            document.getElementById("result").innerHTML=this.responseText;
                        }
                    };
                    /* prepare the array.. could alternatively use JSON format */
                    xmlhttp.open( 'GET', 'mark.php?marks=[' + marks.join(',')+']' );
                    xmlhttp.send();
            }

            /* bind an event listener to the button */
            document.addEventListener('DOMContentLoaded',function(){
                document.querySelector('button').addEventListener('click',send)
            });
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>name</td>
                <td>marks</td>
            </tr>
            <tr>
                <td><input type="text" /></td>
                <td><input type="number" /></td>
            </tr>
            <tr>
                <td><input type="text" /></td>
                <td><input type="number" /></td>
            </tr>
            <tr>
                <td><input type="text" /></td>
                <td><input type="number" /></td>
            </tr>
        </table>
        <button>submit</button>
        <div id='result'><p></p><div>
    </body>
</html>

【讨论】：