jQuery POST Ajax request

Question

i'm trying to post data from Server A, let's say: www.a.com to server B, www.b.com and then fetch the response from server B

I do it like this, this script runs on server A:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>    
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Naamloos document</title>
</head>

<body>

<form id="Form" onsubmit="validate();" method="post">
Email Address: <input type="text" id="email" name="email">
Password: <input type="text" id="password" name="password">
<input type="submit">
 </form>

<script>
function validate()
{
var e = $('email').value;
var p = $('password').value; //jQuery is easier to type
// the same as
// var p = document.getElementById('password').value;
var req = new Request({
    url: 'http://www.B.com/validate.php?',
    method: 'post',
    data: {'email' : e, 'password' : p},
    onComplete: function(response)
    {
        if (response == "Valid" ) 
        {
            alert("succes");
        }
        else
        {
            alert("blur");
        }
    }
}).send();
}
</script>

</body>
</html>

But at this moment, after hitting the submit button, the only thing that happends is that the fields are being cleared, thats all.

Validate.php looks like this:

<?php echo "Valid"; ?>

Add the onError handler to your request. Log the response in the console using console.log(response) — Julian F. Weinert
– Julian F. Weinert, Commented Jan 24, 2015 at 13:31
api.jquery.com/jquery.ajax is likely a better place than anything from w3schools — mplungjan
– mplungjan, Commented Jan 24, 2015 at 13:42

mplungjan · Accepted Answer · 2015-01-24 13:37:48Z

2

You're submitting the form, so the JavaScript never gets a chance to do anything significant. Since you haven't specified an action, it submits to the current URL and reloads the page.

Stop using intrinsic event attributes.
Use JS event binding (since you are using jQuery already, keep using it)
Capture the event object and prevent the default behaviour of the submit event

such:

<form id="Form" method="post">

$('#Form').on('submit', validate);

function validate (event) {
    event.preventDefault();
    var e = $('#email').val();

You also don't appear to have defined Request anywhere. You should probably switch to jQuery ajax

Also note that Server B will have to give Server A permission to make Ajax requests to it using CORS.

edited Jan 24, 2015 at 13:37

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Jan 24, 2015 at 13:29

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Julian F. Weinert Over a year ago

Could you please correct your code? This isn't valid syntax... :)

Quentin Over a year ago

Well, it was valid syntax, it just wouldn't work, but that bit was the OP's code :)

Branimir Đurek · Accepted Answer · 2015-01-24 13:36:25Z

0

Try to replace this

var e = $('email').value;
var p = $('password').value;

with this

var e = $('#email').val();
var p = $('#password').val();

answered Jan 24, 2015 at 13:36

Branimir Đurek

6325 silver badges13 bronze badges

Collectives™ on Stack Overflow

jQuery POST Ajax request

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related