AJAX Post throws Broken Pipe and results in GET

I am sending a POST request via AJAX to Django server, after receiving the POST request by django it throws a "Broken Pipe error" and also initiates a GET request to same url but searching for "csrfmiddlewaretoken". Is this normal? How to avoid the GET request?

 [script]

<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
<script src="{% static 'js/js_cookie.js' %}"></script>
<script src="{% static 'js/csrf.js' %}">
</script>
<script>
function myfunc(){
    $.ajax({
        url: "help",
        type: 'POST',
        data: {
            "hello": "hello",
        },
    })
}
</script>

[views.py]
def help_view(request):
if request.method == 'GET':
    return render(request, 'jsnapy_wizard/help.html')
if request.method == 'POST':
    print request.POST
    return render(request, 'jsnapy_wizard/help.html')

[urls.py]
urlpatterns = [
url(r'help', help_view, name='help'),

Error

<QueryDict: {u'hello': [u'hello']}>
[12/Jul/2018 07:17:37] "POST /help HTTP/1.1" 200 670
[2018-07-12 07:17:37,677] - Broken pipe from ('127.0.0.1', 49808)

[12/Jul/2018 07:17:37] "GET /help?csrfmiddlewaretoken=nPvGEmGRGLhzGi7X3zRDFhElKLOaMR1CQbZoUA5lwPCCWbdkyVFEPLeE4vzfQ9pC HTTP/1.1" 200 670

1 answer

  • answered 2018-07-12 09:06 seuling

    You have few problems.

    1. If you want to send only ajax, you don't have to use form. You're form is with method=GET and it will send get request when submit.

    So just remove form or add return false in submit. Or just add e.preventDefault() with id. I'll edit using this way.

    1. add csrfmiddlewaretoken in your ajax.

    2. change your url with {% url %}. Maybe {% url 'help' %} (you have to set your own url)

    3. Also you will add success or error after accept ajax return. I'll add just a example. Then you will send JsonResonpse from view, not render the whole template.

      <body> 
          <form> 
              {% csrf_token %} 
              <label for="test">Input</label> 
              <input type="text" id="test"> 
              <button type="submit" id="ajaxBtn">Submit</button>
          </form> 
          <script> 
          function myfunc(){
              $.ajax({
                  url: "{% url 'help' %}",
                  type: 'POST',
                  data: {
                      "hello": "hello",
                      "csrfmiddlewaretoken": "{{ csrf_token }}"
                  },
                  success: function(response) {
                      console.log(response);
                  },
                  error: function(rs, e) {
                      console.log(e);
                  }
              })
          }
          $(document).ready(function(){
              $('#ajaxBtn').click(function(e){
                  e.preventDefault();
                  myfunc();
              })
          })
          </script> 
      </body>
      

    In your view,

    def help_view(request):
        if request.method == 'GET':
            return render(request, 'jsnapy_wizard/help.html')
        if request.method == 'POST':
            # make sure that 'POST' and 'ajax' is different
            if request.is_ajax():
                print 'ajax work'
                data = {
                    'your_data': 'your_data_example',
                }
                return JsonResponse(data)