在 js 脚本中引入内联 javascript 代码答案

【问题标题】：Bring inline javascript code in a js script在 js 脚本中引入内联 javascript 代码
【发布时间】：2013-03-14 11:06:28
【问题描述】：

我有这个代码：

{% for user in users %}

        <form name="form_user_{{ user.id }}" method="post" action="/networks/{{ net.id }}/sensors/{{ sens.id }}/rights">
          <tr>
            <td>
              <div>
                {{ escape(user.name) }}
                <input type='hidden' name="id" value='{{ user.id }}'>
              </div>
            </td>
            <td>

              <label class="radio inline" onclick="document.forms['form_user_{{ user.id }}'].submit();">
                <input type="radio" name="perms" id="perms_{{user.id}}_0" value="0">
                None
              </label>
              <label class="radio inline" onclick="document.forms['form_user_{{ user.id }}'].submit();">
                <input type="radio" name="perms" id="perms_{{user.id}}_1" value="1">
                Read
              </label>
              <label class="radio inline" onclick="document.forms['form_user_{{ user.id }}'].submit();">
                <input type="radio" name="perms" id="perms_{{user.id}}_4" value="4">
                Read + Commands
              </label>

              {{ xsrf_form_html() }}
            </td>

          </tr>
        </form>

我会将这段代码放在 html 页面底部的函数脚本中，并将该函数与 onClick 事件相关联。

我正在尝试编写函数，但它不起作用。

这个函数的错误在哪里？

function createFormAndSubmit(){

{% for user in users %}

 var submitForm = document.createElement("form_user_{{ user.id }}");
 document.body.appendChild(submitForm);
 submitForm.method = "POST";

 var newElement = document.createElement("<input type='hidden' name='id' value='{{ user.id }}'>");
 inputForm.appendChild(newElement);

 var newElement = document.createElement("<input type='radio' name='perms' id='perms_{{user.id}}_0' value='0'>");
 inputForm.appendChild(newElement);

 submitForm.action= "/networks/{{ net.id }}/sensors/{{ sens.id }}/rights";
 document.forms['form_user_{{ user.id }}'].submit();
 submitForm.submit();

{% end %}

}

我正在尝试构建附加树结构中每个元素的表单。

【问题讨论】：

变量只能声明一次。此代码导致var submitForm = ... 和var newElement = ... 的多个声明。这是不允许的。
你能把函数写给我吗？我是 javascript 的新手，我不知道该怎么做...谢谢！
这和python有什么关系？不要使用不适用的标签。
有内联python..

标签： javascript forms dom

【解决方案1】：

Mikko 是 100% 正确的。您需要从服务器传递原始数据并使用 javascript 对其进行解析。

谢天谢地，有一些插件可以让这更容易。 http://daffl.github.com/2011/01/06/jquery-dform.html 是其中之一。

这是一个 python 编码器/解码器：http://docs.python.org/2/library/json.html

要从您将使用的服务器获取 JSON：http://api.jquery.com/jQuery.getJSON/

我对 python 的了解不够，无法给出一个完整的示例，但这些是您实现目标可以采取的基本步骤。

编辑：我将举一个例子，但准备调试它:) 编辑 2：按照 OP 的要求更改为在自己的文件中制作 javascript。

您的 HTML 将如下所示：

<html>
<head>
<script src='path to jquery'></script>
<script src='path to dForm plugin'></script>
<script src='myjs.js'></script> <!-- use relative path -->
</head>
<body>
<form id="myform"></form>

</body>
</html>

您的 myjs.js 文件将如下所示：

    $(function(){
        if($("#myform).length > 0) // only run if #myform exists
        $("#myform").buildForm("http://example.com/myform.json");
    });

myform.json python 文件将包含类似以下代码：

import json
json.dumps({'success': True, 'data': users.values()})

有关 python 和 JSON 格式的更多信息，请参阅 format python output to json。

要使用内联 python 执行此操作，请尝试以下操作：

<html>
<head>
<script src='path to jquery'></script>
<script src='path to dForm plugin'></script>
</head>
<body>
<script>
var dataArray = [
{% for user in users %}
   {
    "action" : "/networks/{{ net.id }}/sensors/{{ sens.id }}/rights",
    "method" : "post", // or get
    "elements" :
    [
        { "type" : "hidden",
          "name" : "id",
          "value" : "{{ user.id }}"
        },
        {
            "name" : "perms",
            "id"   : "perms_{{user.id}}_0",
            "type" : "radio",
            "value": "0"
        },
        {
            "name" : "perms",
            "id"   : "perms_{{user.id}}_0",
            "type" : "radio",
            "value": "0"
        },
        {
            "type" : "submit",
            "value" : "Submit"
        }
        ]
   },
{% end %}
];

for(var i =0; i<dataArray.length; i++){
   $("body").append("<form id='form"+ i +"'></form>");
   $("#form" + 1).dForm(dataArray[i]);
}
</script>
</body>
</html>

我个人不会推荐内联方法，但是，它是一种选择。由于循环，您还需要考虑额外的逗号。根据浏览器，它可能会添加一个空数组项。 IE 可能会完全窒息。

【讨论】：

jQuery.dForm 非常有趣。我必须了解如何以这种方式编写表格。有什么帮助吗？ :)
@sharkbait 我已经添加了一些代码供您查看，您将不得不尝试使用 python json 输出，因为我不知道您的用户对象是什么样的，或者实际上关于 python 的任何东西.无论如何，一旦 python 脚本返回有效的 JSON，表单就会为您构建。
jQuery.dForm 成为我的新朋友 :)
另外，为了完整起见（虽然我不完全推荐这样做），您可以使用内联 python 写出 JSON 数组，就像我链接到的 dForm 示例中的硬编码内联 JSON 一样。不过，AJAX 调用是更好的方法。
你能给我写一个答案吗？

【解决方案2】：

你做错了：不要尝试用任何模板语言生成 Javascript 代码。

将数据从服务器端传递到客户端 Javascript 代码的推荐方法

将您的 JavaScript 代码创建为单独的 .js 文件
当您从页面模板生成 HTML 时，使用数据属性作为 JSON 将相关数据嵌入到 HTML 代码中

http://html5doctor.com/html5-custom-data-attributes/

当页面在浏览器中执行时，如果您在需要执行魔术任务的页面上，则在客户端 DOM 就绪事件上读取此数据。您可以通过调用 jQuery 来找出带有数据属性 $("div.my-marker-css-class").size() > 0 的必要元素来做到这一点

http://api.jquery.com/ready/

使用JSON.parse($("div.my-marker-css-class").data())读取数据属性负载
...并使用 jQuery 或客户端模板填充或生成必要的客户端 DOM (HTML) 元素

DOM tree based JavaScript template engines

这边

您不需要生成 JavaScript 代码
它更易于维护（您可以在 .js 文件中获得语法高亮显示等）。您可以使用 Firebug 等来调试您的 JavaScript 代码和错误行号。
它对缓存更友好，对 HTML 页面的负载更少

这种方法在技术上更胜一筹，一旦掌握，更易于维护且不易出错。但是，这也意味着您必须了解从服务器到浏览器的完整软件堆栈，这意味着新手开发人员需要学习更多。

【讨论】：

我知道！你有理由！但我必须这样做。 :(
我宁愿将js代码写在一个单独的文件中，但我不知道如何将html页面与之关联..
您将在每个 HTML 页面上包含代码，并使用 jQuery 检测何时执行客户端数据填充路径。更新了答案。