Hello,
I’m implementing a login form that asks username and password.
The HTTP response i get is
{"code":17000,"message":"JSON parse error: 'Wrong JSON or ContentType.'.","errorData":{}}
and in the browser console i get the error Content Security Policy: Il caricamento di una risorsa su https://api.backendless.com/favicon.ico è stato bloccato dalle impostazioni della pagina (“default-src”).
This is the code of my login form
<html>
<meta charset="utf-8">
<form action= "https://api.backendless.com/<appid>/<rest key>/users/login" method="POST">
<input type="text" name="login" value="a">username</input><br>
<input type="password" name="password" value="segreta">password</input><br>
<button type="submit" id="submit">Invia</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('#submit').on('click', function(){
$.ajax({
url:"https://api.backendless.com/<appid>/<rest key>/users/login",
type: 'POST',
contentType: 'application/json',
headers:{
"Content-Type": "application/json"
},
async: false
})
})
</script>
</html>`
Obviously instead of appid and appkey i’ve put my id/key.
Thanks for helping
Hi Marco
There are a few reasons why it doesn’t work
-
when you click at “sumbit” button there will be actually two requests, one from your form (it’s a native behavior) and another one from jQuery ajax, so, to solve the problem you have to prevent a submit event in you code
-
the api server is expecting ContentType=application/json but the html form sends “application/x-www-form-urlencoded”
-
in your code you don’t pass request body to ajax function
here is a working code
<html>
<meta charset="utf-8">
<form id="form">
<input type="text" name="login" value="a">username</input><br>
<input type="password" name="password" value="segreta">password</input><br>
<button>Invia</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('#form').on('submit', function(e){
e.preventDefault() // prevent native form sending
$.ajax({
url:"https://api.backendless.com/{APP_ID}/{API_KEY}/users/login",
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ // request body should be stringified
login: e.target.login.value, // e.target=dom element (form); e.target.login=dom element (login input)
password: e.target.password.value,
})
})
})
</script>
</html>
Regards, Vlad
2 Likes
I used this same code which you have given but its not working at all for me. the submit button doesn’t do anything.
Hi Shaurya
from slack conversation:
it doesn’t work for you because you do not use the same code, your code is:
you subscribe on “click” event for button, but you need to subscribe on “submit” event for form
also you need to use e.preventDefault() to avoid form sending
Regards, Vlad
1 Like
this is what happens when i click submit, what should i do to fix it ?
please share your code one more time here
<?php
/*
Template Name: signup
*/
?>
<html>
<meta charset="utf-8">
<form action= "https://api.backendless.com/{APP_ID}/{API_KEY}/users/login" method="POST">
<input type="text" name="login">username</input><br>
<input type="password" name="password">password</input><br>
<button type="submit" id="submit">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('#submit').on('click', function(e){
$.ajax({
url:"https://api.backendless.com/{APP_ID}/{API_KEY}/users/login",
type: 'POST',
contentType: 'application/json',
headers:{
"Content-Type": "application/json"
},
data: JSON.stringify({
login: e.target.login.value,
password: e.target.password.value
async: false
})
})
</script>
</html>
please read my answer above Error on login and compare your code with mine
When i use it the submit button doesnt do anything
i tried to find a lot online for the solution of my problem. i dont know what its related to if not backendless. I just cant happen to connect the login (or any form) to backendless…
- just copy/past the next code exactly as it is
<html>
<meta charset="utf-8">
<form id="form">
<input type="text" name="login" value="a">username</input><br>
<input type="password" name="password" value="segreta">password</input><br>
<button>Invia</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('#form').on('submit', function(e){
e.preventDefault() // prevent native form sending
$.ajax({
url:"https://api.backendless.com/{APP_ID}/{API_KEY}/users/login",
type: 'POST',
contentType: 'application/json',
data: JSON.stringify({ // request body should be stringified
login: e.target.login.value, // e.target=dom element (form); e.target.login=dom element (login input)
password: e.target.password.value,
})
})
})
</script>
</html>
-
replace <appid>
<rest key>
with your own, you can find them on the dashboard page https://take.ms/QM9OD
-
run the code
ok il do it . REST API or JS API key ?
you can use any of them, it’s needed for roles, analytics, bl, e.g.
https://backendless.com/docs/rest/users_user_roles.html
I did exactly what you said and the after clicking submit nothing happen.
did you open browser’s dev console, Network Section? like on this video https://take.ms/zvfw7
“Cannot read property ‘ajax’ of undefined” doesn’t look like “nothing” =)
Really? Ohkay so i guess there some scope here for it to work i hope so
just try to add a debug breakpoint and see what happen when you go into submit callback
$('#form').on('submit', function(e){
e.preventDefault() // <--- add breakpoint to this line
you mean to add a line with debugger;