Send JSON to server side using Ajax

Question

I have a html form and I am making the json object as:

var JSobObject=
    '{"name":"'+personObject.GetPersonName()+
    '","about":"'+personObject.GetAbout()+
    '","contact":"'+personObject.GetPersonContact()+'"}';

(Here personObject holds the form data)

trying to post it to Server.php as:

if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
}
else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//var url = "organizePeople.php?people=" + escape(people.toJSONString());
xmlhttp.open("POST","ServerJSON.php?person="+JSobObject,true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(JSobObject);
xmlhttp.onreadystatechange=function() {
    if(xmlhttp.readyState==4) {
        alert(xmlhttp.responseText);
    }
}

I am not getting any response from the server.php In my server i am doing this

$person = $_POST['person']; 
$objArray = json_decode($person);
print_r($objArray);

Can anyone help me that what I am doing wrong? I am in the learning stage. Just using JS/AJAX I want to prepare JSON and send it to server and get the response of the object datas.

Thanks in advance

Petja · Accepted Answer · 2012-03-11 14:24:10Z

3

I prefer that, you do this with jQuery. It is JavaScript based library to do things (like this) easier.

$.post({
  url: "Server.php",
  data: JSobObject,
  dataType: "json"
}).done(function(msg) {
  alert(msg);
});

You need to download jQuery - of course - to get code to working!

edited Mar 11, 2012 at 14:24

answered Mar 11, 2012 at 14:17

Petja

6041 gold badge8 silver badges21 bronze badges

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

Comments

Steven De Groote · Accepted Answer · 2012-03-11 14:12:34Z

0

2 thoughts I'm having. First of all, I'd sugest you move the xmlhttp.onreadystatechange assigment to above the send() call.

Secondly, have you checked with firebug if you're getting any reponse? Have you tried calling your php page directly, rather than through ajax?

answered Mar 11, 2012 at 14:12

Steven De Groote

2,2635 gold badges33 silver badges53 bronze badges

1 Comment

sohel14_cse_ju Over a year ago

code is not entering the xmlhttp.onreadystatechange=function() { } section

hobberwickey · Accepted Answer · 2012-03-11 15:51:32Z

0

I'm not 100% sure, but probably you'll want something like

$data = json_decode($_POST, true);
$person = $data['person'];

The reason being you're post data is entirely a JSON encoded text string, so you'll need to decode the entire post before you can access the data separately.

answered Mar 11, 2012 at 15:51

hobberwickey

6,4644 gold badges33 silver badges34 bronze badges

Comments

Code Lღver · Accepted Answer · 2012-03-12 04:59:00Z

0

You should check the rawpost from php first, $_POST maybe fill slashes Automatedly

edited Mar 12, 2012 at 4:59

Code Lღver

15.6k16 gold badges61 silver badges75 bronze badges

answered Mar 11, 2012 at 14:24

Yu-hsien Lee

1

Comments

Pranit Bhor · Accepted Answer · 2016-11-25 04:51:26Z

Use this code will help you

<!DOCTYPE html>
<html>

<head>
  <title>Servlet Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.serializeJSON.min.js"></script>



</head>

<body>
<div class="jumbotron text-center">
<h1>Submit form Data to Database in JSON</h1>


</div>
<div class="container">
<div class="row">
<div class="col-sm-3"></div>
<div class="col-sm-5">
<h3>Enter the Details : </h3>
 <form name="myform" id="myform"> 
<div class="form-group">
<label for="fullName">Name:</label>
<input type="text" name="fullName" class="form-control">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group">
<label for="subject">Subject:</label>
<input type="text" name="subject" class="form-control">
</div>
<div class="form-group">
<label for="mark">Mark:</label>
<input type="number" name="mark" class="form-control">
</form>
</div>


<button type="submit" class="btn btn-success " id="submitform">Submit</button>




</div>
<div class="col-sm-3"></div>
</div>

<script>
$(document).ready(function(){
$("#submitform").click(function(e)
{
var MyForm = JSON.stringify($("#myform").serializeJSON());
console.log(MyForm);
 $.ajax(
 {
 url : "<your url>",
 type: "POST",
 data : MyForm,

 });
 e.preventDefault(); //STOP default action

});
});
</script>


</body>
</html>

Collectives™ on Stack Overflow

Send JSON to server side using Ajax

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related