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

Bring inline javascript code in a js script

本文关键字：javascript 代码 js 脚本      更新时间：2023-09-26

我有这样的代码:

{% 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 %}
}

我试图建立的形式附加每个元素在一个树状结构。

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可能会完全窒息。

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

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

  • 创建一个单独的。js文件

  • 当从页面模板生成HTML时，使用data-attributes作为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树的JavaScript模板引擎

这种方式

  • 你不需要生成JavaScript代码

  • 它更容易维护(你得到语法高亮显示。js文件等)。你可以使用Firebug等来调试你的JavaScript代码，错误行号是有意义的。

  • 它对缓存更友好，对HTML页面的负载更少

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

相关文章：