how to send json data to server using ajax

Question

refer.jvmhost.net/refer247/registration, this is my url,i have to fetch request to this url like user details and should get the appropriate response in json format with status n error if it contains ..dont give me android code..

this is html page.

<head>
        <script type="text/javascript" src="json2.js"></script>
</head>
<body>
    <div data-role="page" data-theme="c">
        <div data-role="header" data-position="fixed" data-inset="true" class="paddingRitLft" data-theme="c">
            <div data-role="content" data-inset="true"> <a href="index.html" data-direction="reverse"><img src="images/logo_hdpi.png"/></a>

            </div>
        </div>
        <div data-role="content" data-theme="c">
            <form name="form" method="post" onsubmit="return validate()">
                <div class="logInner">
                    <div class="logM">Already have an account?</div>
                    <div class="grouped insert refb">
                        <div class="ref first">
                            <div class="input inputWrapper">
                                <input type="text" data-corners="false" class="inputrefer" placeholder="Userid" name="userid" id="userid" />
                            </div>
                            <div class="input inputWrapper">
                                <input type="password" data-corners="false" class="inputrefer" placeholder="Password" name="password" id="password" />
                            </div>  <a href="dash.html" rel="external" style="text-decoration: none;"><input type="submit" data-inline="true" value="Submit" onclick="json2()"></a>

                            <p><a href="#" style="text-decoration: none;">Forgot Password</a>

                            </p>
                        </div>
                    </div>
                    <div class="logM">New user? Create refer Account</div>
                    <input type="button" class="btnsgreen" value="Sign Up! its FREE" class="inputrefer" data-corners="false" data-theme="c" />
            </form>
            </div>
        </div>
        <p style="text-align: center;">&#169; refer247 2013</p>
    </div>
</body>

this is json2.js

function json2()
    {
    var json1={"username":document.getElementById('userid').value,
               "password":document.getElementById('password').value, 
              };
    //var parsed = jsonString.evalJSON( true );
    alert(json1["username"]);
    alert(json1["password"]);
};

so tell me how to send the json data to that url n obtain some response like if email id is already exist if u registering with that id ..then give some error like email id already exist n if registerd succesfully then give respone like registerd successfully and status msg..200 okk...

$.ajax({ url: "refer.jvmhost.net/refer247/registration", type: 'POST', contentType:'application/json', data: JSON.stringify(json1), dataType:'json' }); success: function(json1){ console.log("Success: "+json1.userid); }, error:function(json1){ console.log("Error: "+json1); }; };this is ajax code..may be it cotains some error..but i m not getting..so pls find n correcct me — Seenu69
– Seenu69, Commented Dec 27, 2013 at 12:39

Girish Sakhare · Accepted Answer · 2014-10-06 06:34:19Z

5

You can use ajax to post json data to specified url/controller method. In the below sample I am posting an json object. You can also pass each parameter separately.

var objectData =
         {
             Username: document.getElementById('userid').value,
             Password: document.getElementById('password').value                
         };

var objectDataString = JSON.stringify(objectData);

$.ajax({
            type: "POST",
            url: "your url with method that accpects the data",
            dataType: "json",
            data: {
                o: objectDataString
            },
            success: function (data) {
               alert('Success');

            },
            error: function () {
             alert('Error');
            }
        });

And your method can have only one parameter of string type.

     [HttpPost]
    public JsonResult YourMethod(string o)
    {
      var saveObject = Newtonsoft.Json.JsonConvert.DeserializeObject<DestinationClass>(o);
     }

edited Oct 6, 2014 at 6:34

answered Dec 27, 2013 at 12:44

Girish Sakhare

7637 silver badges14 bronze badges

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

1 Comment

kasper Taeymans Over a year ago

there is no need for setting the dataType to json unless the server responds with json.

monu · Accepted Answer · 2013-12-27 12:36:14Z

1

$.ajax({
    url: urlToProcess,
    type: httpMethod,
    dataType: 'json',
    data:json1,
    success: function (data, status) {
        var fn = window[successCallback];
        fn(data, callbackArgs);
    },
    error: function (xhr, desc, err) {
       alert("error");
    },
});

answered Dec 27, 2013 at 12:36

monu

3701 silver badge10 bronze badges

Comments

Java Curious ღ · Accepted Answer · 2013-12-27 12:37:56Z

1

function addProductById(pId,pMqty){
            $.getJSON("addtocart?pid=" + pId + "&minqty="+ pMqty +"&rand=" + Math.floor((Math.random()*100)+1), function(json) {
                alert(json.msg);
            });
        }

Here is a simple example, which will call on button click or onclick event and call addtocart servlet and passes 2 argument with it i.e. pId and pMqty.

and after successful completion it return message in alert which is set in that servlet in json.

answered Dec 27, 2013 at 12:37

Java Curious ღ

3,7129 gold badges43 silver badges65 bronze badges

Comments

kasper Taeymans · Accepted Answer · 2013-12-27 12:39:02Z

-1

var json1={"username":document.getElementById('userid').value,
               "password":document.getElementById('password').value, 
};

$.ajax({
    url: '/path/to/file.php',
    type: 'POST',
    dataType: 'text',//no need for setting this to JSON if you don't receive a json response.
    data: {param1: json1},
})
.done(function(response) {
    console.log("success");
    alert(response);
})
.fail(function() {
    console.log("error");
})
.always(function() {
    console.log("complete");
});

on the server you can receive you json and decode it like so:

$myjson=json_decode($_POST['param1']);

answered Dec 27, 2013 at 12:39

kasper Taeymans

7,0365 gold badges34 silver badges51 bronze badges

1 Comment

a better oliver Over a year ago

Read the question: "should get the appropriate response in json format". Also from the comment: "contentType:'application/json'", so the sever expects JSON as well. And why do you think the OP uses PHP on the server?

Collectives™ on Stack Overflow

how to send json data to server using ajax

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related