AJAX or Javascript POST request for Django form

19 views
Skip to first unread message

DJANGO DEVELOPER

unread,
Nov 23, 2021, 11:19:46 AM11/23/21
to Django users
I am working on a django based project in which I have integrated ML trained models to check if a https url is legitimate or not. for this I need javascript or ajax to call a rest api for my form in which I want to send a post request so that I can check if a https url is legitimate or not.
NOTE: My code is running successfully and giving correct answers on postman. so just want to integrate it with my HTML form.
My work:
form.html:
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/boot...@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>SITE URL Form</title>
  </head>
  <body class="container">
      <form role="form" class="form" onsubmit="return false;">
      <div class="form-group">
        <label for="data">SITE URL</label>
        <textarea id="data" class="form-control" rows="5"></textarea>
      </div>
      <button id="post" type="button" class="btn btn-primary">POST</button>
    </form>

    <div id="output" class="container"></div>

    <script src="/axios.min.js"></script>
    <script>
      (function () {
        var output = document.getElementById('output');
        document.getElementById('post').onclick = function () {
          var data = document.getElementById('data').value;

          axios.post('http://127.0.0.1:8000/predict/', JSON.parse(data))
            .then(function (res) {
              output.className = 'container';
              output.innerHTML = res.data;
            })
            .catch(function (err) {
              output.className = 'container text-danger';
              output.innerHTML = err.message;
            });
        };
      })();
    </script>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/boot...@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/co...@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/boot...@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

myapp/urls.py:
path('form/', form, name="form"),
    path('predict/', predict, name='predict')
this is the response I am returning:
if list(model.predict([test]))[0] == 1:
        return JsonResponse({"Response":"Legitimate"})
    else:
        return JsonResponse({"Response":"Phishing or fake"})

Duncan Santiago

unread,
Nov 23, 2021, 12:17:32 PM11/23/21
to django...@googlegroups.com
hello, am not sure what the question is. Kindly elaborate.

--
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/e81cf4f0-1208-4623-97f9-4b88f01d67b3n%40googlegroups.com.

DJANGO DEVELOPER

unread,
Nov 23, 2021, 12:22:20 PM11/23/21
to Django users
okay let me explain.
I have trained models which tells us that which website is legitimate or which website is not legitimate. I have integrated that model with my django web app using rest api.
I tested the API on postman and working.
now I want to get the result on front end using HTML CSS and javascript. so how can I achieve it?

To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CACPcFdJ11YDrrpcCChwMcufz4CqcySacbKVQ-OtvEAVZEhK%3DBg%40mail.gmail.com.

Duncan Santiago

unread,
Nov 23, 2021, 12:35:37 PM11/23/21
to django...@googlegroups.com
do a demo, enter the URL on the text area and click on the post button.
Then send me the logs on the terminal running Django and also open the console and send the output,

To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAKPY9pnmOXaLFnBRE4Eqi52yY-E%2BP1ih7arBDbxCqru4a-ZXxA%40mail.gmail.com.

Duncan Santiago

unread,
Nov 23, 2021, 12:39:20 PM11/23/21
to django...@googlegroups.com
your page also reloads and results may not be displayed on your frontend, just add this lines on your onclick listerner

function(e){ //notice the e parameter, it is the event parameter.
e.preventDefault()
.... your code here.

}

or you can just paste this on your script section


(function () {
        var output = document.getElementById('output');
        document.getElementById('post').onclick = function (e) {
            e.preventDefault()

          var data = document.getElementById('data').value;

          axios.post('http://127.0.0.1:8000/predict/', JSON.parse(data))
            .then(function (res) {
              output.className = 'container';
              output.innerHTML = res.data;
            })
            .catch(function (err) {
              output.className = 'container text-danger';
              output.innerHTML = err.message;
            });
        };
      })();

DJANGO DEVELOPER

unread,
Nov 23, 2021, 1:28:14 PM11/23/21
to Django users
sorry if you get offended because I need a solution. a working solution. I am not familiar with javascript. so getting a lot of issues

To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CACPcFd%2BeW2Qc%3DRM8%3Dz8vJOK%3D2GcAd5B48fOOME3dt8RtZyqAYg%40mail.gmail.com.

Duncan Santiago

unread,
Nov 23, 2021, 1:32:47 PM11/23/21
to django...@googlegroups.com
send me your code then, 
or GitHub repo handle.

To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAKPY9pkV7%2Bn8Rj6QAoADLgTmEojPgpWZZ%3DWPz4ABKpTkV9HZNw%40mail.gmail.com.

DJANGO DEVELOPER

unread,
Nov 23, 2021, 1:40:16 PM11/23/21
to Django users
can I have you on anydesk or any meeting tool?

To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CACPcFd%2Bb6S4EF1u%2BPJQM4L8vNEO1jNSJox9LEW73B-8%3DqJfJEw%40mail.gmail.com.

Duncan Santiago

unread,
Nov 23, 2021, 2:05:23 PM11/23/21
to django...@googlegroups.com
let's try google meet.

To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CAKPY9pmy_CooJxoa0jkp_BuaTAfFkHW6hneMVmgyCNrabronJQ%40mail.gmail.com.

DJANGO DEVELOPER

unread,
Nov 23, 2021, 2:09:43 PM11/23/21
to Django users
okay


To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/CACPcFd%2BEquDGn896Pf7aN52WrS5M%2Bnu%3D7rqVj1CH79TL0rbeeA%40mail.gmail.com.

DJANGO DEVELOPER

unread,
Nov 23, 2021, 2:09:50 PM11/23/21
to Django users
Reply all
Reply to author
Forward
0 new messages