CODEWITHSUNDEEP
javascriptjqueryhtmlajax
kamran
kamran

Reputation: 31

How to receive data back from server using ajax?

Basically I have a form with a username textbox and a submit button in it. Now what I want is that when the user input text in textbox it should get the textbox value and send the username to server so the server could check whether the username is taken by any other user or not. I could do sending the text value to server but I don't know how to receive back some data and turn the textbox border into red and pop an error if the username has been taken.

Here is my code for getting text value and sending it to server:

<!DOCTYPE html>

<html>
 <head>

<script src="../JquerySock.js"></script>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">    

<script>
  $(document).ready(function() {
      $('#Registeration_Username_box').on('input', function() {
        console.log('excuted input');
        postUsernameToServer();
    });
  });
  function postUsernameToServer() {
      var formData = {
                'username': $('input[name=UserName]').val(),
              };
              // process the form
              $.ajax({
                  type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
                  url: '../postr', // the url where we want to POST
                  data: formData, // our data object
                  dataType: 'json', // what type of data do we expect back from the server
                  encode: true
                })
    }
</script>
 </head>
<body>

<div id="Registeration_Div" class="Registeration_Div">
    <div class="createnewaccount" id="createnewaccount">Create new account</div>
    <form class="Registration_Form" id="Registration_Form" action="../postr" method="POST">

        <span class="Usernameerror_spn" id="Usernameerror_spn">Username has been taken</span>
        <div id="Registeration_Username_DIV" class="Registeration_Username_DIV">
            <input type="text" id="Registeration_Username_box" class="Registeration_Username_box"
                placeholder="Username" name="UserName" maxlength="30" />
        </div>

    </form>
</div>

</body>
</html>

As you can see I have a span box before my username textbox which by default is hidden, but I want it to be shown if the user has been taken.

Upvotes: 3

Views: 8576

Answers (1)

NoobishPro
NoobishPro

Reputation: 2549

Well, first off:

You are requiring the datatype to be JSON. This means on the server side (Is it PHP?) you have to translate it to a JSON object first. In PHP this would be 

$data = array("username" => "bla", "taken" => "taken");
echo json_encode($data);

For Java EE you could use this: (source)

int spacesToIndentEachLevel = 2;
new JSONObject(jsonString).toString(spacesToIndentEachLevel);

Using org.json.JSONObject (built in to JavaEE and Android) Now, you have to make sure it returns ONLY the required JSON and nothing else, or you'll get errors.

Then, to get the feedback within your ajax call:

function postUsernameToServer() {
  var formData = {'username': $('input[name=UserName]').val()};
              // process the form
              $.ajax({
                  type: 'POST', // define the type of HTTP verb we want to use (POST for our form)
                  url: '../postr', // the url where we want to POST
                  data: formData, // our data object
                  dataType: 'json', // what type of data do we expect back from the server
                  encode: true
                }).done(function(data){ //any name you put in as an argument here will be the json response string.
                   var username = data.username;
                   var taken = data.taken;

                   //check if username is taken
                   if(taken == "taken"){
                     //make input border red
                     $('.yourInput').css({"border-color": "red"});
                   }
                   else{
                     //make input border green
                     $('.yourInput').css({"border-color": "green"});
                   }
              }).error(function(errorData){
                //Something went wrong with the ajax call. It'll be dealt with here
              });;
    }

Upvotes: 3

Related Questions