django implements foreground and background data binding by submitting form with ajax+post

Posted by TraceyK on Tue, 07 Jul 2020 16:31:40 +0200

The first step is to introduce jquery files, either online or offline, to add to your own staticfiles

What's demonstrated here is adding offline

<script src={% static 'js/jquery-2.1.1.min.js' %}></script>

Note that this sentence is added before the ajax jquery script you write.

Then the HTML form is as follows:


  1. <form id="sqlform" method="post">  
  2.  {% csrf_token %}//Prevent Request Forgery
  3.  <input  id="sqlinput" name="sqlinputname" style="width:95%;height:30px;background-color:#fefcff; border:#d1d0ce 1px solid;"  type="text"></input>  
  4.  <button id="submit" style="width:50px;height:30px;" type="submit" >query</button>  
  5.  </form>  
  6.  <pre id="sql_output" style="width:95%;margin-top:10px;height:100%;background-color:#fefcff; border:#d1d0ce 1px solid;" ></pre>  


If you haven't commented it out in settings

'django.middleware.csrf.CsrfViewMiddleware',

You need to add this sentence to your jquery.

$.ajaxSetup({
                 data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
            });
Then the whole ajax script, the comparison written here is simply to highlight the communication with django:
  1. <script>  
  2.    $(document).ready(function(){  
  3.               $.ajaxSetup({  
  4.                    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },  
  5.               });  
  6.              $('#sqlform').submit(function(){  
  7.                   var input = $("#sql input').val (); * get the user input sql statement in the form Note that it is the same as the input id in your html.
  8.                    
  9.                   $.ajax({  
  10.                       type:"POST",  
  11.                       data: {input:input},  
  12.                       url: "", //The url of the background processing function is used here. The static url needs to beUrls.pyName in or write http address directly
  13.                       cache: false,  
  14.                       dataType: "html",  
  15.                       success: function(ret){ <span style="font-family: Roboto, Helvetica, Arial, sans-serif;">//Pop up the result from view on success, which is the return value of HttpResponse in the back-end processing function</span>  
  16.                          $('#sql_output').html(ret)    
  17.                          // var content= $("#sqlinput");  
  18.                          // $('#sql_output').append(content.val());  
  19.                           
  20.                      },  
  21.                      error: function(){  
  22.                          alert("false");  
  23.                      }  
  24.                  });  
  25.                  return false;  
  26.              });  
  27.    
  28.          });  
  29. </script>  

Next, write about our backendView.pyBackend handler in
def comments_upload(request):
    if request.method == 'POST':
        print "it's a test"                            #For testing
        print request.POST['input']           #Test if you can receive an input field from the front end
        return HttpResponse(<span style="line-height: 1.42857;">request.POST['input']</span><span style="line-height: 1.42857;">)     #Last Return to Front End </span>
    else:
        return HttpResponse("<h1>test</h1>")
Because there is Chinese soViews.py Begin with

#coding=utf8
Note: The url page of ajax POST is not the page that receives input.....I've slaughtered this place a second time...That is comments_The upload function is the processing function for the page of the POST request, and the page we submit the request (HTML above) is only the page that provides the input and receives the processing result, so the receive processing statement cannot be written in the HTML above, it needs to be written to comments_The page where the upload function is located.

Topics: JQuery Django SQL