Question

我正在尝试在表单提交时使用ajax请求返回数据。我的目标是使用两个视图，一个也处理模板加载，另一个处理来自表单的POST请求。在当前状态下，表单将重定向到回调中的JSON。这是有意义的，因为它是表单操作url指向，但是，我想只是将数据传递到当前页面，而不是重新加载页面或重定向到另一页。

以下是代码：

user.html

<form action="{% url 'ajax-user-post' %}" method="post">
{% csrf_token %}
   {% for user in users %}
  <input type="submit" name="name" value="{{ user }}">
{% endfor %}

views.py

def ajax_user(request):
  # get some data..

  if request.METHOD == 'POST':
    user = request.POST['user']
    user_data = User.objects.get(user=user)

    data = {'user_data': user_data}
    return JsonResponse(data)


def user(request):
  return render(request, 'user.html', context)

urls.py

url(r'^user/', user, name="user"),
url(r'^ajax/user/', ajax_user, name="ajax-user-post")

的.js

$('form').on('submit', function(){
  var name = // the name of the user selected
  $.ajax({
        type: "POST",
        dataType: "json",
        url: 'ajax/user/',
        data: { 'csrfmiddlewaretoken': csrftoken, 'name': name, 'form': $form.serialize() },
        success:function(data) {
          // hide the current data
          console.log(data);
          displayUserData(data)
        }
  })
});

提前感谢您的帮助！

Answer 1

我想将数据传递到当前页面，而不是重新加载页面或重定向到另一页面。

这意味着您需要通过event.preventDefault()调用停止表单提交事件。

因此，请从以下位置更改此行：

$('form').on('submit', function(){

以下两个：

$('form').on('submit', function(e){
    e.preventDefault();

Django ajax重定向表单提交

1 个答案: