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;
});
};
})();
On Tue, 23 Nov 2021 at 10:34, Duncan Santiago <[email protected]>
wrote:
> 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,
>
> On Tue, 23 Nov 2021 at 10:21, DJANGO DEVELOPER <[email protected]>
> wrote:
>
>> 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?
>>
>> On Tue, Nov 23, 2021 at 10:16 PM Duncan Santiago <
>> [email protected]> wrote:
>>
>>> hello, am not sure what the question is. Kindly elaborate.
>>>
>>> On Tue, 23 Nov 2021 at 09:19, DJANGO DEVELOPER <[email protected]>
>>> wrote:
>>>
>>>> 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/[email protected]/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/[email protected]/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/[email protected]/dist/umd/popper.min.js";
>>>> integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
>>>> crossorigin="anonymous"></script>
>>>> <script src="
>>>> https://cdn.jsdelivr.net/npm/[email protected]/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"})
>>>>
>>>> --
>>>> 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 [email protected].
>>>> To view this discussion on the web visit
>>>> https://groups.google.com/d/msgid/django-users/e81cf4f0-1208-4623-97f9-4b88f01d67b3n%40googlegroups.com
>>>> <https://groups.google.com/d/msgid/django-users/e81cf4f0-1208-4623-97f9-4b88f01d67b3n%40googlegroups.com?utm_medium=email&utm_source=footer>
>>>> .
>>>>
>>> --
>>> 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 [email protected].
>>> To view this discussion on the web visit
>>> https://groups.google.com/d/msgid/django-users/CACPcFdJ11YDrrpcCChwMcufz4CqcySacbKVQ-OtvEAVZEhK%3DBg%40mail.gmail.com
>>> <https://groups.google.com/d/msgid/django-users/CACPcFdJ11YDrrpcCChwMcufz4CqcySacbKVQ-OtvEAVZEhK%3DBg%40mail.gmail.com?utm_medium=email&utm_source=footer>
>>> .
>>>
>> --
>> 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 [email protected].
>> To view this discussion on the web visit
>> https://groups.google.com/d/msgid/django-users/CAKPY9pnmOXaLFnBRE4Eqi52yY-E%2BP1ih7arBDbxCqru4a-ZXxA%40mail.gmail.com
>> <https://groups.google.com/d/msgid/django-users/CAKPY9pnmOXaLFnBRE4Eqi52yY-E%2BP1ih7arBDbxCqru4a-ZXxA%40mail.gmail.com?utm_medium=email&utm_source=footer>
>> .
>>
>
--
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-users/CACPcFd%2BeW2Qc%3DRM8%3Dz8vJOK%3D2GcAd5B48fOOME3dt8RtZyqAYg%40mail.gmail.com.
