通过AJAX提交邮箱创建用户后，模板渲染失败问题求助

嘿，我来帮你捋捋为啥模板渲染不出来的问题，核心原因和调整方案都在下面了：

1. 最关键的问题：AJAX成功后没处理返回的模板 #

你现在的Vue代码里，AJAX请求成功后只是在控制台打了个日志，但后端已经把渲染好的agent_invitations_confirmation.html返回给前端了，你得把这个返回的HTML内容放到页面里才能看到啊！

调整前端AJAX的success回调： #

修改user_invitation.js里的success部分：

success: function (response) {
  // 先在你的invitations.html页面里加一个容器，比如<div id="result-container"></div>
  document.getElementById('result-container').innerHTML = response;
  console.log("ajax success");
},

记得在invitations.html里添加用来展示结果的容器：

<!-- 放在页面合适的位置，比如提交按钮下方 -->
<div id="result-container"></div>

2. 后端代码的小细节优化 #

除了前端的问题，后端还有两个小坑需要填上，避免后续出问题：

（1）过滤空邮箱 #

用户输入的时候可能会不小心敲空行，导致创建空用户或者报错，所以要先过滤掉空的邮箱：
修改views.py的循环部分：

for client in request.POST['invitations'].split('\n'):
    client = client.strip()  # 去掉邮箱前后的空格、换行符
    if not client:  # 跳过空行
        continue
    try:
        # 原创建用户的代码...

（2）去掉冗余的save()调用 #

User.objects.create()方法已经会自动把用户保存到数据库了，后面的user.save()完全是多余的，直接删掉就行。

3. 进阶方案：用Vue数据驱动渲染结果（更符合Vue风格） #

如果你不想直接插入HTML，也可以让后端返回JSON数据，然后用Vue来渲染结果，这样体验更流畅：

后端改成返回JSON： #

from django.http import JsonResponse

def InvitationCreateView(request):
    newUsers = []
    alreadyUsers = []
    for client in request.POST['invitations'].split('\n'):
        client = client.strip()
        if not client:
            continue
        try:
            user = User.objects.create(
                username=client,
                email=client,
            )
            user.groups.add(Group.objects.get(name='Clients'))
            newUsers.append(client)
        except IntegrityError:
            alreadyUsers.append(client)
    return JsonResponse({
        "newUsers": newUsers,
        "alreadyUsers": alreadyUsers
    })

前端Vue代码调整： #

var vue = new Vue({
    el: '#invitations',
    data: {
        invitations: '',
        newUsers: [],
        alreadyUsers: []
    },
    methods: {
        submit: function () {
            var self = this;
            $.ajax({
                type: 'POST',
                url: '/accounts/invitations/create/',
                data: {
                    invitations: this.invitations,
                    csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val(),
                },
                context: this,
                success: function (data) {
                    // 把后端返回的JSON数据赋值给Vue的data属性
                    self.newUsers = data.newUsers;
                    self.alreadyUsers = data.alreadyUsers;
                    console.log("ajax success");
                },
                error: function () {
                    console.log("ajax error");
                }
            })
        }
    }
});

页面添加Vue模板展示结果： #

在invitations.html里提交按钮下方加这段代码：

<div v-if="newUsers.length || alreadyUsers.length">
    <h3>邀请处理结果</h3>
    <div v-if="newUsers.length">
        <p>✅ 成功创建以下用户：</p>
        <ul>
            <li v-for="email in newUsers" :key="email">{{ email }}</li>
        </ul>
    </div>
    <div v-if="alreadyUsers.length">
        <p>⚠️ 以下用户已存在：</p>
        <ul>
            <li v-for="email in alreadyUsers" :key="email">{{ email }}</li>
        </ul>
    </div>
</div>

这样就完全用Vue的方式来展示结果，不用切换页面，体验更好~

内容的提问来源于stack exchange，提问作者Aurélien