Send Login form data using jquery + POST + JSON format

Question

I am trying to build a login form. The data is transferred using jquery and converted to json format. But for some reason I keep getting this: error 1) "OPTIONS ' URL ' No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access" 2) XMLHttpRequest cannot load ' URL '. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I tried testing my code by printing it out and the data is formatted correctly but when I try to debug it I don't see any data going to the server after I hit the sumbit button. Here is the code:

    <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.json-2.2.js"></script>
<script src="GetPostAjax.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $("#submit").click(function(e){
        e.preventDefault();
        var username,password;
        username=$("#username").val();
        password=$("#username").val();
        if(username.length>0 && password.length>0)
            {
            // var request = new Object();
            // var userDetails = new Object();
             var user = new Object();


             user.userid=username;
             user.password=password;

            // userDetails.user = user;
            // request.userDetails = userDetails;
             var jsonfy = $.toJSON(user);
             $("#json1").html(jsonfy);

            //Ajax Call

            var url='***URL***';
            post_data(url, function(data) {
                alert("Success");
            });


             $(".part1").val('');
             $("#username").focus();
            }

    });
});
</script>
<style>
body{font-family:arial;font-size:12px;}
.right{text-align:right}
input[type='text'], select
{
border:solid 1px #333;
padding:4px;
width:180px;
}
select{width:190px}
div{padding:20px;word-wrap: break-word;width:600px}

</style>
</head>
<body>
<table width='100%'>
    <tr><td>
</td>
<td width='730px'>

</td>
</tr>
</table>
<table width='100%'>
    <tr>

        <td valign='top'>
            <table width='100%'>
            <tr>

            <td>
            <form method="post" action="***URL***" >
            <table width='100%'>
            <tr>
            <td class='right'>Name</td>
            <td><input type='text' name='username' id='username'  class='part1'/></td>
            </tr>

            <tr>
            <td class='right'>Password</td>
            <td><input type='text' name='password' id='password' class='part1'//></td>
            </tr>

            <tr>
            <td class='right'></td>
            <td><input type='submit' id='submit'/></td>
            </tr>
            </table>
            </form>
            </td>

            <td width='50%' valign='top'>
            <h2>JSON Output</h2>
            <div id='json1'>
            </div>
            </td>
            </tr>
            </table>
        </td>
     </tr>  


</body>
</html>

My GetPostAjax.js contains this code:

    function get_data(url,encodedata, success){
    $.ajax({
        type:"GET",
        url:url,
        data :encodedata,
        dataType:"json",
        restful:true,
        contentType: 'application/json',
        cache:false,
        timeout:20000,
        async:true,
        beforeSend :function(data) { },
        success:function(data){
            success.call(this, data);
        },
        error:function(data){
            alert("Error In Connecting");
        }
});
}

function post_data(url,encodedata, success){
    $.ajax({
        type:"POST",
        url:'***URL***',
        data :encodedata,
        dataType:"json",
        restful:true,
        contentType: 'application/json',
        cache:false,
        timeout:20000,
        async:true,
        beforeSend :function(data) { },
        success:function(data){
            success.call(this, data);
        },
        error:function(data){
            alert("Error In Connecting");
        }
});
}

When I select dev options in chrome and hit submit after entering a userid and password I see that the Form Data tab is missing. I just see 'Request Headers' and 'Response Headers'. So I am not sure whether the form data is missing or is it not sending it out? I have been at it for over 2 weeks and I'm not sure I understand what is going wrong here.

Answer 1

This:

post_data(url, function(data) {
            alert("Success");
        });

Should be:

post_data(url,jsonfy,'no');

Send Login form data using jquery + POST + JSON format

Question

1 answers

solution1
1 ACCPTED 2014-03-31 18:18:34

Send Login form data using jquery + POST + JSON format

Question

1 answers

solution1 1 ACCPTED 2014-03-31 18:18:34

solution1
1 ACCPTED 2014-03-31 18:18:34