CODEWITHSUNDEEP
jqueryajax
omg
omg

Reputation: 139872

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

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.

Upvotes: 1

Views: 1222

Answers (5)

redShadow
redShadow

Reputation: 6777

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">
  <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

Upvotes: 0

Scharrels
Scharrels

Reputation: 3055

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>

Upvotes: 0

Boris Gu&#233;ry
Boris Gu&#233;ry

Reputation: 47585

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

    });

Upvotes: 0

aciniglio
aciniglio

Reputation: 1837

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.

Upvotes: 1

Fermin
Fermin

Reputation: 36081

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.

Upvotes: 0

Related Questions