How to receive data back from server using ajax?

Question

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.

Welcome to Stack Overflow! You can help us help you by formatting your so we don't have scroll it. This can easily be done by removing non relevant code. Please read [Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). When your code shows your precise problem with nothing extra, you are showing respect to those who volunteer to help you. — zhon, Aug 21 '16 at 21:08

score 3 · Answer 1 · edited May 23 '17 at 10:33

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
              });;
    }

Oh, I'm sorry, I have no knowledge of java ee. However, on the jquery side, this should be it. You can find more info on how to create a json string from java ee on stackoverflow, like here: http://stackoverflow.com/questions/6185337/how-do-i-pretty-print-existing-json-data-with-java — NoobishPro, Aug 21 '16 at 20:53

How to receive data back from server using ajax?

1 Answers1

Linked