title: Why does my http response keep showing like an html page?
body: <p>Here's the thing: I thought I could receive an <strong>HTTP response and manage it with javascript ajax</strong> and do whatever I wanted with that response without the user even noticing. For example using console.log(response).
  But <strong>it's not working</strong> and the response is showing in text form like an html.</p>
  <p><strong>I'll explain what I'm doing and my problem:</strong>
  I'm making a comment section for a django app. My comment system was working fine. The user could post comments and see other peoples comments.
  The thing is that I had to refresh the page every time to load the recently published comments.</p>
  <p>That's not very cool, <strong>I want to be able to post a comment and see it immediately without reloading the page.</strong>
  I did my research and found this comment on quora</p>
  <blockquote>
  <p>You use AJAX and a Django backend view.
  Something (a user leaving a new comment, a timer etc.) will trigger a
  JavaScript AJAX call to a Django view requesting comments for the
  page. That Django view will return the result to the JavaScript AJAX
  call. It can be done in two ways:</p>
  <ol>
  <li><p>it can just return the data, typically in JSON and then JavaScript
  worries about rendering that data on the page</p>
  </li>
  <li><p>or, the view can run the
  data through a Django template and return the partial HTML and then
  the JavaScript just needs to swap out the HTML response chunk in the
  content area for the comments (typically identified by a HTML ID,
  where you replace the HTML content of the div with a certain ID with
  the HTML you received from the view both approaches have pros and cons
  and which is better depends on many factors</p>
  </li>
  </ol>
  </blockquote>
  <p>I am trying to follow the second way.
  My problem is that the HttpResponse changes my entire page and displays what's in the response as html text!</p>
  <p>Here's my views.py. This is the view that renders the page where the comment section is at
  (I'm not sending the rendered html yet because I'm having problems with HTTP response)</p>
  <pre><code>def make_bid(request, pk):
      listing = Listing.objects.get(id = pk)
      comments = listing.comments.all()
      if request.method == &quot;POST&quot;:
          if request.user.is_authenticated:
              comment = Comment(
                  user = request.user,
                  comment= request.POST['comment'],
                  date = datetime.datetime.now().date(),
                  listing = listing)
              comment.save()
              context = {'comments': listing.comments.all()}
              rendered = render_to_string(&quot;auctions/comments.html&quot;, context)
              return HttpResponse(&quot;this a http response&quot;)
          else:
              return HttpResponse(&quot;user is not even authenticated&quot;)
      else:
          return render(request, &quot;auctions/make-bid.html&quot;, {
              'article' : listing,
              'comments': comments
          })
  </code></pre>
  <p>The html for the comment section</p>
  <pre><code>    &lt;aside class=&quot;comment__section&quot;&gt;
          &lt;h3&gt;Comments&lt;/h3&gt;
          &lt;form action=&quot;{% url 'make-bid' article.id %}&quot; method=&quot;post&quot; id=&quot;form-comment&quot;&gt;
              {% csrf_token%}
              &lt;textarea id=&quot;textbox&quot; class=&quot;field form__field--block&quot; value=&quot;&quot; name=&quot;comment&quot; placeholder=&quot;What do you think about this listing?&quot;&gt;&lt;/textarea&gt;
              &lt;input class=&quot;button button__primary&quot; type=&quot;submit&quot; value=&quot;Publish&quot;&gt;
          &lt;/form&gt;
          &lt;section class=&quot;comment__container&quot;&gt;
              &lt;!-- comments from the http response should be inserted here with javascript--&gt;
          &lt;/section&gt;
      &lt;/aside&gt;
  </code></pre>
  <p>The javascript. I copied this from another stackoverflow question. I was doing it myself with plain javascript and thought that might be the problem. It's not. It still doesn't give me the result I want</p>
  <pre><code>&lt;script&gt;
      aside = document.querySelector(&quot;.comment__section&quot;)
      // this is the id of the form
      $(&quot;#from-comment&quot;).submit(function(e) {
  
      e.preventDefault(); // avoid to execute the actual submit of the form.
  
      var form = $(this);
      var url = form.attr('action');
  
      $.ajax({
          type: &quot;POST&quot;,
          url: url,
          data: form.serialize(), // serializes the form's elements.
          success: function(data)
          {
              alert(data); // show response from the php script.
              console.log('Submission was successful.');
              console.log(data);
          },
          error: function(data){
              console.log(&quot;no response&quot;)
          }
          });
  
      });
  
  
  &lt;/script&gt;
  </code></pre>
  <p>I already tried using return JsonResponse. And still the same result :(
  I am really lost here. I'm very new to Django and server-side stuff. And I have no idea why is the  response showing like a whole page?
  What am i missing?
  Do http responses actually work differently as I think they do?
  I would really appreciate any help. Thank you!!!</p>