在Django中使用jQuery提交表单

Question

here is my jquery script looks like . It's used to post the value of name, email and comments. and I add the csrf successfully.

 <script>
        $(document).ready(function(){
            $.ajaxSetup({
                 data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
            });
            $('#comment_form form').submit(function(){
                name = $("#id_name").val();
                email = $("#id_email").val();
                content = $("#id_comment").val();
                $.post("{% url 'blog:comments_upload' %}",
                        {
                            name:name,
                            email:email,
                            content:content,
                        },
                function(data, status){
                    alert("data: " + data + "\nstatus " + status);
                });
            });
        });
    </script>

I can get the data sended by the jquery through view function .and print them out.but the jquery can't get the data sended by my view method

def comments_upload(request):
    if request.method == 'POST':
        print "it's a test"
        print str(request.POST)
        return HttpResponse("test")
    else:
        return HttpResponse("<h1>test</h1>")

here comes the error

<QueryDict: {u'content': [u'test'], u'csrfmiddlewaretoken': [u'V85BdVwzGY3NUglVfNt4dBWJB0ROQmpv'], u'name': [u'bricks'], u'email': [u'test@test.com']}>
[11/Apr/2015 15:29:51] "POST /comments_upload/ HTTP/1.1" 200 4
Traceback (most recent call last):
  File "/usr/lib/python2.7/wsgiref/handlers.py", line 86, in run
[11/Apr/2015 15:29:51] "POST /detail/6/ HTTP/1.1" 200 12763
    self.finish_response()
  File "/usr/lib/python2.7/wsgiref/handlers.py", line 128, in finish_response
    self.write(data)
  File "/usr/lib/python2.7/wsgiref/handlers.py", line 212, in write
    self.send_headers()
  File "/usr/lib/python2.7/wsgiref/handlers.py", line 270, in send_headers
    self.send_preamble()
  File "/usr/lib/python2.7/wsgiref/handlers.py", line 194, in send_preamble
    'Date: %s\r\n' % format_date_time(time.time())
  File "/usr/lib/python2.7/socket.py", line 324, in write
    self.flush()
  File "/usr/lib/python2.7/socket.py", line 303, in flush
    self._sock.sendall(view[write_offset:write_offset+buffer_size])
error: [Errno 32] Broken pipe
[11/Apr/2015 15:29:51] "POST /comments_upload/ HTTP/1.1" 500 59
----------------------------------------
Exception happened during processing of request from ('127.0.0.1', 59723)
Traceback (most recent call last):
  File "/usr/lib/python2.7/SocketServer.py", line 593, in process_request_thread
    self.finish_request(request, client_address)
  File "/usr/lib/python2.7/SocketServer.py", line 334, in finish_request
    self.RequestHandlerClass(request, client_address, self)
  File "/usr/local/lib/python2.7/dist-packages/Django-1.7-py2.7.egg/django/core/servers/basehttp.py", line 129, in __init__
    super(WSGIRequestHandler, self).__init__(*args, **kwargs)
  File "/usr/lib/python2.7/SocketServer.py", line 651, in __init__
    self.finish()
  File "/usr/lib/python2.7/SocketServer.py", line 710, in finish
    self.wfile.close()
  File "/usr/lib/python2.7/socket.py", line 279, in close
    self.flush()
  File "/usr/lib/python2.7/socket.py", line 303, in flush
    self._sock.sendall(view[write_offset:write_offset+buffer_size])
error: [Errno 32] Broken pipe

Any useful information is appricate

Answer 1

I can't find bug in this code, so a try a another jquery ajax function to solve this problem

<script src="{% static "jquery/jquery.min.js" %}"></script>
    <script>
        $(document).ready(function(){
            $.ajaxSetup({
                 data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
            });
            $('#comment_form form').submit(function(){
                var name = $("#id_name").val();
                var email = $("#id_email").val();
                var content = $("#id_comment").val();
                $.ajax({
                    type:"POST",
                    data: {name:name, email:email, content:content},
                    url: "{% url 'blog:comments_upload' %}",
                    cache: false,
                    dataType: "html",
                    success: function(result, statues, xml){
                        alert(result + statues + xml);
                    },
                    error: function(){
                        alert("false");
                    }
                });
                return false;
            });
        });
    </script>

and it did works well, here is the output in the console

it's a test
bricks
fangxubx@gmail.com
test