How to send some data to server side and get the response with jQuery?

Question

Like below,I need to send "name" and "psw" value to server side,

and get the response as right or wrong.

<table cellpadding="0" border="0" width="100%">
    <tr align="center">
     <td align="right">name/email：</td>
     <td><input type="text" id="name" /></td>
    </tr>
    <tr align="center">
     <td align="right" valign="top">password：</td>
     <td>
      <input type="text" id="psw" />
     </td>
    </tr>
    <tr align="center">
     <td></td>
     <td><span id="loginErr"></span></td>
    </tr>
</table>

The simpler,the better.

Answer 1

There's lots of different ways to do it, you would probably be best to check out the JQuery documentation which has lots of examples and demos of the various overloads.

Answer 2

The simplest way is to do something like this:

$.ajax({
    url: 'document.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        // do something with xml
    }
});

Where you would tie that function to some action. Note that $.ajax() can also take a data parameter, where you would include the user and pw parameters.

More insight here.

Answer 3

Submit Event & Ajax requests

Here is an example :

 $("form").submit(function() {
      $.post("test.php", { name: $('#name').val(), psw: $('#psw').val()},
         function(data){
           alert(data.name); // John
         };

    });

Answer 4

I would recommend the form plugin. Your html should have form tags:

<form id="loginform" action="fill in url here" method="post">
<table cellpadding="0" border="0" width="100%">
    <tr align="center">
        <td align="right">name/email</td>
        <td><input type="text" id="name" /></td>
    </tr>
    <tr align="center">
        <td align="right" valign="top">password</td>
        <td>
                <input type="text" id="psw" />
        </td>
    </tr>
    <tr align="center">
        <td></td>
        <td><span id="loginErr"></span></td>
    </tr>
</table>
</form>

And for the jQuery code:

$(document).ready(function() { 
    var options = { 
        success:       showResponse  // post-submit callback 
        dataType:  json        // 'xml', 'script', or 'json'
    }; 

    // bind form using 'ajaxForm' 
    $('#loginform').ajaxForm(options); 
}); 

function showResponse(json)  { 
  if(json.success){
    // handle successful response here
  } else {
    // handle unsuccessful response here
  }
}

Don't forget to include the ajaxform script in your header:

<script type="text/javascript" src="jquery.form.js"></script>

Answer 5

I think the best way to do that is to submit the form via-ajax and get a JSON reply from the server.. so:

The javascript:

  $(document).ready(function(){
    $("#my-jq-form").submit(function(){
      // Prepare URL and data
      url = $(this).attr("action");
      parm_name = $("#input-name").val();
      parm_psw = $("#input-psw").val();

      jQuery.get(url, {
        'name' : parm_name,
        'psw' : parm_psw,
      }, function (data, textStatus){
        $("#message").html(data.message)
        if (data.status) {
          $("#message").css('color', "#0f0")
        } else {
          $("#message").css('color', "#f00")
        }
      }, "json");
      return false; // block form submitting
    });
  });

The HTML form:

<form id='my-jq-form' method='GET' action="http://webdocs.samu.local/esperimenti/jquery-ajax/jqlogin-req.php"&gt;
  <table cellpadding="0" border="0">
      <tr>
          <td align="right">name/email：</td>
          <td align="left"><input type="text" id="input-name" name="name" /></td>
      </tr>
      <tr>
          <td align="right" valign="top">password：</td>
          <td align="left"><input type="text" id="input-psw" name="psw" /></td>
      </tr>
      <tr align="center">
          <td></td>
          <td><span id="loginErr"></span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td><button type='submit' name='submit'>Login</button></td>
      </tr>
  </table>
</form>
<div id="message"></div>

Then, you can generate the JSON serverside using something like (in php):

<?php

/*

  Simple Ajax login management:
    replies via-JSON with login status informations, plus a message
    that will be shown to user

*/

$login_user = $_GET['name'];
$login_pass = $_GET['psw'];

$my_user = "admin";
$my_pass = "mypass";

if ($login_user == $my_user && $login_pass == $my_pass) {
  $login = TRUE;
  $status="true";
  $message="Login Successful. Welcome $my_user into systems. ".date("Y-m-d H:i");
} else {
  $login = FALSE;
  $status="false";
  $message="Login failed. Wrong username/password.";
}


header("Content-Type: text/javascript; charset=utf-8");
echo "{ \"status\": $status, \"message\": \"$message\" }";

..hope that helps. For more info, see http://docs.jquery.com/Ajax/jQuery.get