Comment envoyer des données au serveur et obtenir la réponse avec jQuery?

Question

Comme ci-dessous, j'ai besoin d'envoyer "nom" et "psw" valeur au côté serveur,

et obtenir la réponse comme bonne ou mauvaise.

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

Plus c'est simple, mieux c'est.

Answer 1

La façon la plus simple est de faire quelque chose comme ceci:

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

Où vous attacher cette fonction à une action. Notez que $ .ajax() peut également prendre un paramètre de données, où vous incluez les paramètres utilisateur et pw.

Plus d'informations here.

Answer 2

Il y a beaucoup de différentes façons de le faire, vous devriez probablement vérifier le JQuery documentation qui a beaucoup d'exemples et de démos des différentes surcharges.

Answer 3

Submit Event & Ajax requests

Voici un exemple:

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

    }); 

Answer 4

Je recommande la form plugin. Votre html doit avoir des balises de formulaire:

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

Et pour le code jQuery:

$(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 
    } 
} 

Ne pas oublier d'inclure le ajaxform script dans votre tête:

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

Answer 5

Je pense que le meilleur façon de le faire est de soumettre le formulaire via-ajax et obtenir une réponse JSON du serveur .. donc:

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

Le formulaire HTML:

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

Ensuite, vous pouvez générer le Serverside JSON en utilisant quelque chose comme (en 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\" }"; 

. .J'espère que cela pourra aider. Pour plus d'informations, voir http://docs.jquery.com/Ajax/jQuery.get