如何将一些数据发送到服务器端并使用jQuery获取响应？

Question

像下面这样，我需要发送“名称”和“psw”值到服务器端，

并得到答案为正确或错误。

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

越简单越好。

Answer 1

最简单的方法是做这样的事情：

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

你想要在这绑功能，一些动作。请注意，$ .ajax（）也可以带一个数据参数，其中包含用户和pw参数。

更多洞察here。

Answer 2

有很多不同的方式来做到这一点，你可能最好检查一下JQuery documentation，它有很多的例子和各种过载的演示。

Answer 3

Submit Event & Ajax requests

下面是一个例子：

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

    }); 

Answer 4

我会建议form plugin。你的HTML应该有表单标签：

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

而对于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 
    } 
} 

不要忘了，包括你的头的ajaxform script：

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

Answer 5

我认为最好的方法是通过ajax提交表单并从服务器获得JSON回复。所以：

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

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> 

然后，您可以使用类似（在PHP）生成JSON服务器端：

<?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有帮助。欲了解更多信息，请参阅http://docs.jquery.com/Ajax/jQuery.get