使用 ajax 加载模板时未呈现脚本

Posted 2023-02-24

【中文标题】使用 ajax 加载模板时未呈现脚本

【英文标题】：Scripts not rendered when template loaded with ajax

【发布时间】：2011-05-16 02:14:08

【问题描述】：

我有一个注册页面，它有几个步骤。每一步都使用 ajax 刷新页面内容，并使用自己的模板。在模板中，我有一些用于管理操作的 js 代码。不幸的是，在包含了我注意到的渲染模板之后，我的 <script> 被省略了。这是什么原因以及如何解决？链接到我的页面，需要与 facebook 帐户同步：http://ntt.vipserv.org/my-rte-landing/

主模板：

% block js %
% endblock %

% block content %
<div id="landing">
    <div id="landing-left" style="float:left">
        <div class="video" style="width:450px; background: #f8f8f8; height:335px">
            video here
        </div>
        <div class="faq">
            FAQ !
        </div>
    </div>
    <div id="landing-right" style="float:left; width:400px;">
         html|safe 
    </div>
</div>
% endblock %

第 2 步的模板：

% block js %
<script>
    $(function ()       
        $('#twitter-form').submit(function(e)
            e.preventDefault();
            step2();
        );
        $('a .submit-step-2').click(function(e)
            e.preventDefault();
            step2();
        );

        function step2()
            var twitter_id = $('#twitter_id').val();
            var div = $('#landing-right');

            $.ajax(
                type: "POST",
                url: "% url my_rte_landing %",
                data: "twitter_id=" + twitter_id,
                dataType: "json",
                success: function(data)
                    div.html(data['html']);
                
            );
            return false;
        ;

    );

</script>
% endblock %

<h1>Step 2: connect to Twitter</h1>

<div class="connect-twitter" style="background:#f8f8f8">
    <img src="MEDIA_URLsite/img/twitter.png" />
    <span>Please enter your twitter ID</span>

    <form action="." method="post" id="twitter-form">
        <input id="twitter_id" name="" type="text" value="" />
        <input class="submit-step-2" type="submit" value="Send"/>        
    </form>
        <a href="#" class="submit-step-2">Skip this step</a>
</div>

第三步：

% block js %
<script>
    $(function ()
        $('a .submit-step-3').click(function(e)
            e.preventDefault();
            step2();
        );        
        function step3()
            var twitter_id = $('#twitter_id').val();
            var div = $('#landing-right');

            $.ajax(
                type: "POST",
                url: "% url my_rte_landing %",
                dataType: "json",
                success: function(data)
                    div.html(data['html']);
                
            );
            return false;
        ;
    );
</script>
% endblock %

<div class="connect-twitter" style="background:#f8f8f8">
    <div id="likes-list">
    </div>
    <a href="#" class="submit-step-3">Proceed</a>  
    </div>

最后是渲染内容的函数：

def my_rte_landing(request):
    step = request.session.get("step", request.REQUEST.get("step", 1))

    if request.method == "POST":
        #ajax
        if step == 3:
            twitt = request.POST.get('twitter_id', None)            
            request.session["step"] += 1
            user_id = get_user_id(request.user.id)
            html = render_step3(request, user_id=user_id)

        result = simplejson.dumps( "html" : html,, cls = LazyEncoder)
        return HttpResponse(result, mimetype='application/javascript') 

    else:
        if step == 1:
            request.session["step"] = 1
            html = render_step1(request)
            request.session["step"] += 1

            return render_to_response('socialauth/login_page.html','html': html,, context_instance=RequestContext(request))            
        else:
            new_user = True
            new_user_id = get_user_id(request.user.id)
            new_user_url = get_user_url()

            html = render_step2(request, new_user_url=new_user_url, new_user_id=new_user_id, new_user=new_user)
            request.session["step"] = 3

            return render_to_response('socialauth/login_page.html', 
                                    'html': html, context_instance=RequestContext(request))

def render_step2(request, new_user_url="", new_user_id="", new_user=False):
    template_name = 'socialauth/step2.html'
    return render_to_string(template_name, RequestContext(request, 
        'new_user': new_user,'new_user_url': new_user_url, 'new_user_id': new_user_id,,),)

def render_step3(request, user_id):
    template_name = 'socialauth/step3.html'
    return render_to_string(template_name, RequestContext(request, 'user_id': user_id))

【参考方案1】：

当我使用 Prototype 返回一些带有混合 javascript 的 html 时，我必须专门告诉 AJAX 调用来评估通过 evalScripts:true 选项返回的 javascript。希望这会有所帮助。

更新

看起来您正在使用 jQuery。结帐jQuery.getScript()

如果您将dataType 设置为script，您也可以使用常规jQuery.ajax()