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

发布时间：2020-12-14 22:59:45 所属栏目：资源来源：网络整理

导读：中期开发我决定切换到服务器端渲染以获得更好的控制amongst other benefits.我的Web应用程序完全基于AJAX,没有URL重定向,所以这里的想法是一个自我构建的网站我只是无法弄清楚发送javascript事件/函数以及html字符串的正确方法,还是应该在静态文件中预先加

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

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

假设客户点击预渲染按钮’打开表’

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

有几篇文章提到不要在Javascript中使用eval(),有什么方法可以解决这个问题吗？我不想为尚不存在的元素预加载不必要的事件

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

理论范例：

客户端基础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')

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

最佳答案

更新：

你可以使用jQuery.getScript()来延迟加载JS.我认为这个解决方案尽可能接近运行JS而不使用eval().

看这个例子：

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." );
});

和“/path/to/script.js”可以是从$.getJOSN响应返回的字符串.

此外,getScrippt()的文档还提供了有关如何处理错误和缓存文件的示例.

旧答案：

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

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

$("body").on("click",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);
}
});

我没有测试代码,但我认为它应该工作.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!