Javascript 使用AJAX在模板中使用Django渲染模板

“我的网站”当前在表单自己的页面上呈现表单。我正试图让它们呈现在我主页上的边栏div标记中。然而，我不知道如何塑造JavaScript和/或视图，所以我得到表单模板的HTML并插入到div标记中

更新

我在控制台中遇到以下错误：

GEThttp://127.0.0.1:8000/new_trend/ 500（内部服务器错误）

HTML（主页上的标记，我想将表单模板插入其中）：

查看

def new_indicator(request):
    # if this is a POST request we need to process the form data
    if request.method == "POST":
        # create a form instance and populate it with data from the request:
        form = IndicatorForm(request.POST)
        # check whether it's valid:
        if form.is_valid():
            indicator = form.save(commit=False)
            indicator.author = request.user
            indicator.modified_date = timezone.now()
            indicator.save()
            return redirect('dashboard')
    else:
        form = IndicatorForm()
    return render(request, 'mysite/sidebar_trend.html', {'form': form})

---

我能自己解决这个问题。对于遇到这种情况的其他人（包括我自己！），下面是我如何让它工作的

JavaScript

$(function() {
    $("#new-trend").click(function(event){
        alert("User wants to add new trend");  //this works
        $.ajax({
            type: "GET",
            url:"/new_trend/",
            success: function(data) {
                $('#sidebar').html(data),
                openNav()
            } 
        })
    });
});

这里有一些修正。首先，您需要包含csrftoken，您可以通过另一个JS函数获得它。其次，AJAX请求需要是一个POST，而不是GET（不确定为什么，如果您知道，请在下面进行评论）。下面是更新的代码片段

// Get cookie for CSRF token (from Django documentation)
function getCookie(name) {
  var cookieValue = null;
  if (document.cookie && document.cookie !== '') {
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
      var cookie = jQuery.trim(cookies[i]);
      // Does this cookie string begin with the name we want?
      if (cookie.substring(0, name.length + 1) === (name + '=')) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
};

// Load new Trend form
$(function() {
    $("#new-trend").click(function(event){
        var csrftoken = getCookie('csrftoken');
        $.ajax({
            type: "POST",
            url: "/new_trend/",
            data: {'csrfmiddlewaretoken': csrftoken},
            success : function(data) {
                $('#sidebar').html(data);
                openNav()
            }
        })
        alert("User wants to add new trend")  //this works
    });
});

---

你应该解释一下它目前的功能。。你有任何错误或错误的行为吗？是的，我意识到了这一点并回来更新。我不知道如何调试vai终端，否则我会尝试发布更多细节。

// Get cookie for CSRF token (from Django documentation)
function getCookie(name) {
  var cookieValue = null;
  if (document.cookie && document.cookie !== '') {
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
      var cookie = jQuery.trim(cookies[i]);
      // Does this cookie string begin with the name we want?
      if (cookie.substring(0, name.length + 1) === (name + '=')) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
};

// Load new Trend form
$(function() {
    $("#new-trend").click(function(event){
        var csrftoken = getCookie('csrftoken');
        $.ajax({
            type: "POST",
            url: "/new_trend/",
            data: {'csrfmiddlewaretoken': csrftoken},
            success : function(data) {
                $('#sidebar').html(data);
                openNav()
            }
        })
        alert("User wants to add new trend")  //this works
    });
});

@login_required
def ajax_indicator_form(request):
    form = IndicatorForm()
    html = render_to_string('mysite/sidebar_trend.html', {'form': form})
    return HttpResponse(html)