Question

我正在使用自己的自定义表单。看起来像这样：

{%extends 'base_template.html'%}


{%block title%}
<title> Simple Ajax Demo </title>
{%endblock%}


{%block javascript%}
    <script>
    $(document).ready(function(){



    $("#formi").submit(function(event){


        $.ajax({
             type:"POST",
             url:"{% url 'haha:ajax' %}",
             data: {
                username : $('#username').val(),
                password : $('#password').val(),
                csrfmiddlewaretoken: {% csrf_token %},
             },

             success: function(data){
             alert('asdas');
             },
        });
   });

   });

    </script>

{%endblock%}

{%block content%}
<div>
    <form method="post" id="formi">
        {%csrf_token%}
        Username:<input type="text" id="username"><br>
        Password:<input type="text" id="password"><br>
        <button type="submit">Click Me</button>
    </form>
</div>
{%endblock%}

我有两个输入字段，分别是密码和用户名，要保存到表User中。

View.py

def ajax(request):
     if request.method == 'POST':
          username = request.POST['username']
          password = request.POST['password']
          Users.objects.create(username=username, password=password)

     return render(request,'core/ajax.html')

我也尝试过GET方法。但是页面仍然刷新。还尝试在单击按钮时触发Ajax调用，但是它显示类似多格数值错误。也尝试过

username = request.POST.get('username')
password = request.POST.get('password')

Answer 1

将onSubmit事件编辑为

$("#formi").submit(function(event){
    event.preventDefault();
    $.ajax({
         /* you have type here change it to method */
         method:"POST",
         url:"{% url 'haha:ajax' %}",
         data: {
            username : $('#username').val(),
            password : $('#password').val(),
            csrfmiddlewaretoken: {% csrf_token %},
         },

         success: function(data){
         alert('asdas');
         },
    });
}

每当我们提交表单时，刷新页面都是onSubmit的默认行为。通过event.preventDefault();，我们暂停了默认行为。

Answer 2

只需修改jquery代码，效果很好！！这是代码：

{%extends 'base_template.html'%}


{%block title%}
<title> Simple Ajax Demo </title>
{%endblock%}


{%block javascript%}
    <script>


    $(document).on('submit','#formi',function(event){

          event.preventDefault();

          $.ajax({

                    method:"POST",
                    url:"{%url 'haha:ajax'%}",
                    data: {
                        username : $('#username').val(),
                        password : $('#password').val(),
                        csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val()
                    },

                    success: function(data){
                        alert('asasd');
                    },
            });
    });


    </script>

{%endblock%}

{%block content%}
<div>
    <form id="formi" method="post">
        {%csrf_token%}
        Username:<input type="text" name="username" id="username"><br><br>
        Password:<input type="text" name="password" id="password"><br><br>
        <input type="submit" value="Click Me"><br>
    </form>
</div>
{%endblock%}

但是我不明白为什么document.on（'submit'，'＃formi'）{}在起作用？

将ajax与Django结合使用时页面仍刷新

2 个答案: