Question

中期开发我决定切换到服务器端渲染以获得更好的控制amongst other benefits。我的Web应用程序完全基于AJAX，没有URL重定向，所以这里的想法是一个自我构建的网站

我无法找出发送javascript事件/函数以及html字符串的正确方法，还是应该在静态文件中预先加载所有必需的javascript？

让我们说客户点击预先呈现的按钮＆＃39;打开表格＆＃39;

服务器将进行查询，构建html表并将其发回，但此表还需要javascript触发器和函数才能正常工作，这些是如何发送，接收和执行的？

有一些文章提到在Javascript中不使用eval（），有什么方法可以解决这个问题吗？我不想为那些尚不存在的元素预加载不必要的事件

服务器是Python，客户端是Javascript / JQuery

理论范例：

Client Base Javascript：

$("body").on("click", "#open_table", function() {

    $.getJSON('/get_table', function(response){

        $("#table_div").append(response.html);
        eval(response.javascript()); //??
    }
});

Python服务器（views.py）：

def get_table(request):
    data = {}
    #String containing rendered html
    data['html'] = get_render_table()
    #String containing Javascript code?
    data['javascript'] = TABLE_EVENTS_JAVASCRIPT
    return HttpResponse(json.dumps(data),content_type='json')

值得注意的是我的问题来自实验/学习的观点

Answer 1

<强>更新

您可以使用jQuery.getScript()延迟加载JS。我认为这个解决方案可以在不使用eval（）的情况下运行JS。

见这个例子：

jQuery.getScript("/path/to/script.js", function(data, textStatus, jqxhr) {
    /* Code has been loaded and executed. */
    console.log( data ); // Data returned
    console.log( textStatus ); // Success
    console.log( jqxhr.status ); // 200
    console.log( "Load was performed." );
});

和＆＃34; /path/to/script.js"可以是$ .getJOSN响应返回的字符串。

此外，getScrippt（）的文档还提供了有关如何处理错误和缓存文件的示例。

旧答案：

使用.on()将事件附加到当前和未来的DOM元素。您可以在DOM插入之前附加事件，也可以在DOM插入之后附加attache事件。

因此，在您的示例中，您可以执行以下操作：

$("body").on("click", "#open_table", function() {
$.getJSON('/get_table', function(response){
 var code = $(response.html);
   code.find(".elementToFind").on("click", function (){
 // Code to be executed on click event
});
    $("#table_div").append(code);
}
});

我没有测试代码，但我认为它应该可行。

Answer 2

假设您不能只设置一个事件绑定函数，然后从主脚本中调用它（例如，您需要的JavaScript不能提前猜到），那么一个非常简单的方法就是添加它JavaScript在脚本标记内返回的HTML内容的底部。当它与HTML一起附加时，脚本应该只执行，不需要eval（）。

我不能发誓这可以在旧的浏览器中使用，但这是我曾经使用过几次的技巧，我在Firefox，Chrome或任何后来的IE版本中都没有遇到任何问题

Answer 3

我想我知道你在这里要问的是什么，根据我的理解，你想发送新的＆＃34;页面＆＃34;异步，并呈现新的JavaScript和HTML。看起来你已经得到了你的请求/响应，所以我不会去讨论发送JSON对象，以及整个＆＃34; how-to＆＃34;发送HTML和JavaScript，因为它看起来你有这个部分。为了做你想做的事情并动态添加你的javascript，这个stackoverflow问题看起来像它有你需要的 Is there a way to create a function from a string with javascript?

所以与您的示例有关，以下是从python脚本中接收JSON字符串时的外观：

$("body").on("click", "#open_table", function() {

    $.getJSON('/get_table', function(response){

        $("#table_div").append(response.html);

        /* Create function from string */
        var newFunction = Function(response.javascript['param_1'], response.javascript['param_2'], response.javascript['function']);

        /* Execute our new function to test it */
        newFunction();

    }
});

*您的实际功能内容为字符串：response.javascript['function']
*您的参数名称（如果有的话）将位于单独的字符串中：response.javascript['param_1']

这几乎是＆＃34; String to function＆＃34;的直接副本。您可以在链接的问题中看到的代码，只需将其替换为您的相关代码即可。此代码还假设您的对象与response.javascript对象一起发送，该对象包含具有实际功能内容和参数名称的数组。我确定您也可以更改var的实际名称，或者将其放在关联数组中或您可以跟踪和重命名的内容中。所有的建议，但希望这对你有用，并帮助你解决问题。

Answer 4

我也在我的项目中做类似的工作，我必须使用ajax调用加载部分html，然后这个部分HTML包含需要附加事件的元素。所以我的解决方案是创建一个公共方法来进行ajax调用并保持js方法名称在html响应本身的ajax调用之后执行。例如，我的服务器返回低于html

$.ajax(options).done(function (data) {
                
                var $target = $("#table_div");      
                $target.fadeOut(function () {
                    $target.html(data);
                    $target.fadeIn(function () {
                        try {

                            $('input[data-act="onPartialLoad"]', $target).each(function () {
                                try {
                                  //you can pass parameters in json format from server to be passed into your js method
                                    var params = $(this).attr('params');
                                    if (params == undefined) {
                                        window[$(this).val()]();
                                    }
                                    else {
                                        window[$(this).val()]($.parseJSON(htmlutil.htmlDecode(params)));
                                    }
                                } catch (e) {
                                    if (console && console.log) {
                                        console.log(e.stack);
                                        console.log($(this).val());
                                    }
                                }
                            });
                        }
                        catch (e) {
                            console.log(e.stack);
                        }
                    });
                });
            });

现在在常用方法中，查找输入[type ='hidden'] [data-act ='onPartialLoad']，并为每次运行在value属性中提供的方法名称（value =“createTableEvents”）

不要使用Eval（）方法，因为安全性不建议使用的问题。 Check here

你可以使用window [“method name”]运行js方法......所以这里是我使用的代码的一部分。

{{1}}

使用jQuery.getScript（）（由Kalimah Apps建议）首先加载所需的js文件。

将Javascript代码与呈现的HTTP一起发送到客户端的正确方法是什么？

4 个答案: