时间戳

首页 > 解决方案 > 将数组元素添加到表单时出错：参数列表后未捕获 SyntaxError: missing )

javascript - 将数组元素添加到表单时出错：参数列表后未捕获 SyntaxError: missing )

问题描述

我正在研究一个学术 php/javascript 网络项目，但遇到了一些问题。在这个项目的架构中，数据总是通过 POST 使用“隐藏表单”发送到服务器。此表单由以下函数构建：

function crearform(name, method){
    var formu = document.createElement('form');
    document.body.appendChild(formu);
    formu.name = name;
    formu.method = method;
    formu.action = 'index.php';   
}


function insertacampo(form ,name, value){
    formulario = form;
    var input = document.createElement('input');
    input.type = 'hidden';
    input.name = name;
    input.value = value;
    formulario.appendChild(input);
}

function enviaform(form){
    form.submit();
}

使用示例：

 <a class="btn-get-started i18n-cancelar" id="btn-cancel" type="button" onclick="
                                        crearform('formenviar','post');
                                        insertacampo(document.formenviar,'document_id', '<?php echo $this->document['document_id'] ?>');
                                        insertacampo(document.formenviar,'controller','ImpDoc');
                                        insertacampo(document.formenviar,'action','show');
                                        enviaform(document.formenviar);">
                                        Return
                                    </a>

这工作得很好！但是对于下一步，我添加了一个堆栈，以便应用程序可以存储收到的所有 POST。这样，对于返回操作，我只需要获取堆栈的最后一个 POST，并且我已经有了参数“控制器”、“操作”......可用。

而且......这是问题所在。存储在堆栈中的最后一个 POST 可通过 php 变量访问。

var_dump 输出：上次存储的 POST

array(2) { ["controller"]=> string(6) "Portal" ["action"]=> string(8) "_default" }

我创建了一个 javascript 函数，它接收带有 POST 值的数组并将它们添加到“隐藏表单”中。

function multiple_addfield(form, params) {
    for(let key in params) {
        let input = document.createElement('input');
        input.type = 'hidden';
        input.name = key;
        input.value = params[key];
        form.appendChild(input);
    }
}

并建立这样的形式：

<a class="btn-get-started i18n-back" type="button" onclick="
                            crearform('formenviar','post');
                            multiple_addfield(document.formenviar, <?php echo json_encode($this->previousShow); ?>);
                            enviaform(document.formenviar);">
                            Volver
                        </a>

但是当我点击按钮时它不起作用。 在 Firefox 控制台中，我收到此错误：

Uncaught SyntaxError: missing ) after argument list

在 chrome 控制台中：

Uncaught SyntaxError: Unexpected end of input

检查 Chrome 中的按钮元素：

<a class="btn-get-started i18n-back" type="button" onclick="
                            crearform('formenviar','post');
                            multiple_addfield(document.formenviar, {" controller":"portal","action":"_default"});="" enviaform(document.formenviar);"="">Volver</a>

有人可以帮助我吗？

谢谢！！

标签： javascriptphparraysjson

解决方案

看起来这是一个混合 php 和 JavaScript 以及 HTML 属性内容的问题，通常在处理许多不同的因素时，最好一次测试一件事以确定错误在哪里

例如，您现在正在尝试测试一个 JavaScript 函数，但不是只在属性文本中测试它，而是从服务器生成的代码中测试它，也许首先使用您可以自己编写的基本 JavaScript 对其进行测试，以确保 Javascript 工作，然后如果因此，尝试从属性中手动调用相同的代码，看看它是否有效，如果有效，则尝试将服务器代码输出为静态文本，然后手动复制并尝试将其输入到函数中，然后如果所有这些个人步骤行得通，如果你把它放在一起还是不行，至少你知道所有的个别部分都很好，问题只是放在一起

在这种情况下

<a class="btn-get-started i18n-back" type="button" onclick="
                            crearform('formenviar','post');
                            multiple_addfield(document.formenviar, {" controller":"portal","action":"_default"});="" enviaform(document.formenviar);"="">Volver</a>

只是无效的html，因为它在其他双引号中包含双引号而没有被转义，这很难判断它是否都是直接从服务器生成并放置在属性中的

简单来说，不要将 php 代码输出到内联 JavaScript 中，而是尝试将 php 输出到一个 JavaScript 变量中，该变量将在单独的脚本标记中定义，一旦你完成了，你可以简单地引用该 JavaScript 变量在内联JavaScript，或者更好的是，只需在脚本标签中创建一个完全自定义的函数，然后简单地将 onclick 设置为该函数的名称

因此，例如在服务器端，您可以在某处添加

<script>
var serverResponse = `<?php echo json_encode($this->previousShow); ?>`

//As a string to be safe, in case there was a problem encoding the JSON on the server side, then parse it manually (can do custom try catch here as well)

var parsed={}
try{parsed=JSON.parse(serverResponse)}
catch(e){}

function clickify (){
    crearform('formenviar','post');
                         multiple_addfield(document.formenviar, parsed)
}


</Script>
<a class="btn-get-started i18n-back" type="button" onclick="clickify">Volver</a>

推荐阅读