title: Log in authentication using Jquery and Json
body: <p>Currently I have a login form that will send JSON data (username and password) to my api server and the server will send back JSON data (username and balance) back to my webpage.</p>
  
  <p>My HTML Code:</p>
  
  <pre><code>&lt;input type="text" name="username" id="username" class="text" maxlength="30" /&gt;
  &lt;br /&gt;
  &lt;input type="password" name="password" id="password" class="text" maxlength="30" /&gt;
  &lt;br /&gt;
  &lt;input type="submit" name="btnSubmit" id="btnSubmit" /&gt;
  </code></pre>
  
  <p>My jQuery Script:</p>
  
  <pre><code>    $(document).ready(function () {
      $("#btnSubmit").click(function () {
          //collect userName and password entered by users
          var userName = $("#username").val();
          var password = $("#password").val();
  
          auth(userName, password);
      });
  });
  
  //authenticate function to make ajax call
  function auth(userName, password) {
      $.ajax
      ({
          type: "POST",
          //SEND TO MY SERVER URL
          url: "http:myserverlocationurl.com",
          dataType: 'json',
          async: false,
          data: '{"userName": "' + userName + '", "password" : "' + password + '"}',
          success: function () {
  
              //???????????????????????
          }
      })
  }
  </code></pre>
  
  <p>My question has to do with the '??????????' listed above. How do I encapsulate/display the json data that is being sent back from the server and onto my webpage (either as a popup -- but ANYTHING would work as long as I can see it).</p>
  
  <p>Thank you and any help would be much appreciated.</p>