Question

我的HTML上有2个选项，通过我的数据库加载选项，用户可以在框之间切换选项，如下所示：

<select id="column1" multiple size="10" name="FromLB" style="width:150px">
        <?php foreach ($result->result() as $row) { ?>
        <option value="<?php echo $row->id ?>"><?php echo $row->title ?></option>
        <?php } ?>
</select>

example

到目前为止，最终的计划是让用户点击提交并访问PHP中这两个选项的数据（通过数组）。

经过一段时间的挖掘，看起来JSON是可行的方式。

我将json.js导入我的项目并开始工作：

    function sort_cols(){
            var i=0;
            var p=0;
            var column1 = new Array();
            var column2 = new Array();

            $("#column1 option").each(function()
            {
                column1[i]=$(this).val();
                i=i+1;
            });

            $("#column2 option").each(function()
            {
                column2[p]=$(this).val();
                p=p+1;
            });      

            JSON = JSON.stringify(column1);

            $.ajax({
                url: '<?php echo base_url() . 'js_tests/update_news'; ?>',
                type: 'POST',
                data: JSON,
                success: function(){
                    alert("Success!")
                }


 });
    }

到目前为止，我只传递一个数组（对于第一个选择列），但是我收到一个错误： 未捕获的TypeError：对象[“15”，“14”，“1”]没有方法'stringify'

我一直在听这个答案： How exactly do you use json_decode to pass a javascript array to php?

我想知道我在这里做错了什么，我怎么能传递我的第二个数组（column2）呢？

Answer 1

在这一行

JSON = JSON.stringify(column1);

重新定义本机JSON对象。为变量使用另一个名称，你应该没问题。

至于提交两个数组，只需使用封装对象：

data2send = JSON.stringify( { 'column1': column1, 'column2': column2 } );

^{除了使用递增索引将数据插入数组之外，只需使用本机push()方法。}

Answer 2

这里发生了一些奇怪的行为，很可能是因为你的JSON变量覆盖了浏览器的原生JSON对象（或旧版浏览器中json.js提供的对象）。

您实际上可以将对象直接传递给$.ajax，因此以下内容将起作用：

$.ajax({
    url: '<?php echo base_url() . 'js_tests/update_news'; ?>',
    type: 'POST',
    data: column1,
    success: function(){
        alert("Success!")
    }
});

如果要将两列作为单独的参数传递，请将其更改为：

$.ajax({
    url: '<?php echo base_url() . 'js_tests/update_news'; ?>',
    type: 'POST',
    data: {
        first_column: column1,
        second_column: column2
    },
    success: function(){
        alert("Success!")
    }
});

现在，您的PHP脚本中将显示$_POST['first_column']和$_POST['second_column']。

这样，您就可以将对象转换为JSON到jQuery，这样您根本不需要包含json.js库。

您的完整代码，已重写：

function sort_cols(){
    var column1 = [],
        column2 = [];

    $("#column1 option").each(function() {
        column1.push($(this).val());
    });

    $("#column2 option").each(function() {
        column2.push($(this).val());
    });      

    $.ajax({
        url: '<?php echo base_url() . 'js_tests/update_news'; ?>',
        type: 'POST',
        data: {
            first_column: column1,
            second_column: column2
        },
        success: function(){
            alert("Success!")
        }
    });
}

Answer 3

让jQuery做繁重的工作：

function sort_cols(){
    var col1 = [], col2 = [];

    $("#column1 option").each(function() {
        col1.push($(this).val());
    });

    $("#column2 option").each(function() {
        col2.push($(this).val());
    });  

    $.ajax({
        url: '<?php echo base_url() . 'js_tests/update_news'; ?>',
        type: 'POST',
        contentType: "application/json",
        data: JSON.stringify({
            column1: col1,
            column2: col2
        }),
        success: function(){
            alert("Success!")
        }
    });
}

使用JSON将Javascript数组传递给PHP

3 个答案: