CODEWITHSUNDEEP
jqueryjsonajaxwebservice-client
GAksut
GAksut

Reputation: 1

My simple jQuery Ajax call doesn't work

This URL http://schooltray.com/VsStWsMblApps/SayHello?fullName=Joe%20Smith

Gets this:

{"SayHelloResult":"{\"Status\":1,\"Message\":\"Hello Joe Smith\"}"}

But my JQuery call doesn't work. The full HTML page is shown below.

<!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>
    <title>Say Hello</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn_SayHello').click(function (e) {
                $.ajax({
                    type: 'Get',
                    url: 'http://schooltray.com/VsStWsMblApps/SayHello?fullName=Joe%20Smith',
                    dataType: 'json',
                    success: function (response) {
                        alert('Success');
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert('Error = ' + errorThrown + ' -- ' + jqXHR.responseText);
                    }
                });
                e.preventDefault();
            });
        });
    </script>
</head>
<body>
    Full Name:<br />
    <input id="txt_Email" type="text" style="width: 300px;" />
    <br /><br />
    <input id="btn_SayHello" type="button" value="Say Hello" />
    <br /><br />
</body>
</html>

Upvotes: 0

Views: 393

Answers (2)

deadpool
deadpool

Reputation: 456

You can create a form and put all your inputs inside that form and try

<!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>
    <title>Say Hello</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn_SayHello').click(function (e) {
                $.ajax({
                    type: 'Get',
                    url: 'http://schooltray.com/VsStWsMblApps/SayHello?fullName=Joe%20Smith',
                    dataType: 'json',
                    success: function (response) {
                        alert('Success');
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        alert('Error = ' + errorThrown + ' -- ' + jqXHR.responseText);
                    }
                });
                e.preventDefault();
            });
        });
    </script>
</head>
<body>
<form name="formname">
    Full Name:<br />
    <input id="txt_Email" type="text" style="width: 300px;" />
    <br /><br />
    <input id="btn_SayHello" type="button" value="Say Hello" />
    <br /><br />
</form>
</body>
</html>

Upvotes: 0

Samir
Samir

Reputation: 1368

Well I have tested in my local, The code is executing correctly if you use a local JSON. But If you want the Json from that perticular URL, I am getting , "Access denied",

Below is the error,

XMLHttpRequest cannot load http://schooltray.com/VsStWsMblApps/SayHello?fullName=Joe%20Smith. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://cons.you.com' is therefore not allowed access.

i.e. , you are doing an XMLHttpRequest to a different domain, where you don't have the access control. Hence the browser is blocking the http request.

Upvotes: 1

Related Questions