Get json response from url and display it in html

Question

I have a python script file that returns a json

{"message": "Login or password is empty", "success": 0}

I want to go to this url in html and dislpay "Login or password is empty" and also save the success int to be used later for pass fail verification.

I have no idea how to get the json parsed so that I can use it in html.

This is my html

<h2> Login</h2>
<form action="http://test.com/cgi-bin/login.py" method="POST" target="hiddenFrame2">
Username:<br>
<input type="text" name="username">
<br>
Password:<br>
<input type="password" name="password">
<br>
<br>
<input type="submit" value="Submit">
<br>
<iframe src="about:blank" frameborder="0" width="100" height="50" scrolling="no" name="hiddenFrame2" class="hide"></iframe>
<br>
<br>
</form>

Do you mean JSON [parse](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)? — Vidul, Jul 31 '15 at 16:31
because its also being used by my android application which is all already done using json — Bytesized, Jul 31 '15 at 16:31
and @vidul I think so but from a url. like under my html form I need it to display the "Login or password is empty" — Bytesized, Jul 31 '15 at 16:32
@Bytesized I guess you are trying to get the data from the URL `window.location.href `? — Vidul, Jul 31 '15 at 16:35
@Vidul the python script is a different url than the html form page. — Bytesized, Jul 31 '15 at 16:38
If you python script is returning a `JSON` string rather than using the `render()` or `render_to_response()` function to render an html page, I suggest you should use ajax. — K Neeraj Lal, Jul 31 '15 at 16:48
@Bytesized Like [this](http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery). — Vidul, Jul 31 '15 at 16:53

score 0 · Answer 1 · edited Jul 31 '15 at 22:05

Suppose you have form like this,

<h2> Login</h2>
<form action="http://test.com/cgi-bin/login.py" method="POST" target="hiddenFrame2" id="myform">
Username:<br>
<input type="text" name="username">
<br>
Password:<br>
<input type="password" name="password">
<br>
<br>
<input type="submit" value="Submit">
<br>
<iframe src="about:blank" frameborder="0" width="100" height="50" scrolling="no" name="hiddenFrame2" class="hide"></iframe>
<br>
<br>
</form>
<span id="log"></span>

You can submit your form like this using ajax,

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="application/javascript">
$(document).ready(function(){
  $("#myform").submit(function(){
      var formvars = $("#myform").serialize();
      var url = "http://test.com/cgi-bin/login.py";

      $.ajax({
        url: url,
        dataType: 'text',
        data : formvars,
        type:"POST",
        success: function(data){
         alert( data );
         var json = eval(data);
         var success = json.success;
         var message = json.message;
         if(success =="1")
           $("#log").text(message); // Success
         else
           $("#log").text(message); // Failed
       },
       error: function(data){
        alert('error; '+ data);
       }
    });
    return false;
  });
});
</script>

It doesn't show the message under the form. How would i go about doing that. I dried adding "document.getElementById("log").innerHTML = message;" but that didn't work — Bytesized, Jul 31 '15 at 17:08
I been messing around with the code and still have not been able to get it to display. — Bytesized, Jul 31 '15 at 17:52
Where is the error? anything in the console? are you receiving data at the server? — K Neeraj Lal, Jul 31 '15 at 18:08
not sure where the error is. The python script itself works. It is just not being displayed by the script provided above — Bytesized, Jul 31 '15 at 18:11

Get json response from url and display it in html

1 Answers1