Question

我有运作正常的javascript和jQuery文件。我尝试将jQuery AJAX复制到我的另一个文件中，但是不起作用。它没有显示AJAX，而是显示返回的JSON信息，而不包含其所在的模板。？

查看

def customer_profile(request, pk):
    name = get_object_or_404(CEName, id=pk)
    name_form = NameForm(instance=name)
    return render(
        request,
        'customer/customer_profile.html',
        {'name':name, 'NameForm': name_form}
    )


def update_profile(request, pk):
    if request.POST:
        name = get_object_or_404(CEName, id=pk)
        name_form = NameForm(data=request.POST, instance=name)
        if name_form.is_valid():
            name_form.save()
            updated_name = get_object_or_404(CEName, id=name.id)
            name_json = render_to_string(
                'ce_profiles/name_json.html',
                {'name_json': updated_name,}
            )
            return JsonResponse({'name_json': name_json})

模板

{% extends 'base.html' %}
{% load static %}

{% block content %}
  {% include 'ce_profiles/name_header.html' %}
  <div id="name" class="container d-flex justify-content-between pt-1">
    <div id="name_json">
      {{ name }}
    </div>
    <button id="update_button" class="bold btn btn-main btn-sm button-main">UPDATE</button>
  </div>
  <div id="div_NameForm" class="container" style="display: none;">
    <hr size="3px">
    <form id="NameForm" method="POST" action="{% url 'customer:update-profile' name.id %}">
      {% csrf_token %}
      {{ NameForm.as_p }}
      <br>
      <button id="save_changes" type="submit" class="btn btn-main button-main btn-block">Save Changes</button>
    </form>
  </div>
{% endblock %}

{% block script %}
  <script src="{% static 'ce_profiles/ce_profiles.js' %}"></script>
  <script src="{% static 'ce_profiles/ce_profiles_jquery.js' %}"></script>
{% endblock %}

<div id="name_json">
  {{ name_json }}
</div>

jQuery

$(document).ready(function() {
  $("#NameForm").submit(function(event) {
    event.preventDefault();
    $.ajax({
      url: $(this).attr('action'),
      type: $(this).attr('method'),
      data: $(this).serialize(),
      dataType: 'json',
      success: function(data) {$("#name_json").html(data.name_json)}
    });
  });
});

javascript

$(document).ready(function() {
  $("#NameForm").submit(function(event) {
    event.preventDefault();
    $.ajax({
      url: $(this).attr('action'),
      type: $(this).attr('method'),
      data: $(this).serialize(),
      dataType: 'json',
      success: function(data) {$("#name_json").html(data.name_json)}
    });
  });
});


let updateButton
let toggleNameForm = function(e) {
  e.stopPropagation();
  let x = document.getElementById("div_NameForm");
  let btn = this;
  if (x.style.display === "none") {
    x.style.display = "block";
    btn.innerHTML = "CANCEL";
    btn.classList.replace("button-main", "button-secondary");
  } else {
    x.style.display = "none";
    btn.innerHTML = "UPDATE";
    btn.classList.replace("button-secondary", "button-main");
  }
};


document.addEventListener('DOMContentLoaded', function () {
  updateButton = document.getElementById('update_button');
  updateButton.addEventListener('click', toggleNameForm);
});

当我删除script的{{1}}链接并尝试更新显示的名称时，浏览器中显示的全部是： ce_profiles_jquery.js

???

Answer 1

通过在浏览器中检查源，检查模板中是否引用了正确的javascript文件。

我在测试环境中运行了您的代码，一切正常。当我注释掉您的jQuery代码时，表单正常提交，并显示随后的页面：

{name_json: "<div id=\"name_json\">The Name</div>"}

如果您在浏览器控制台中未收到任何错误，则对{% static 'ce_profiles/ce_profiles.js' %}的引用可能是没有jQuery代码的其他文件。

使用纯JavaScript移入文件时，jQuery脚本不起作用

1 个答案: