Question

如下所示，我需要向服务器端发送“name”和“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＆amp; 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\" }";

..希望有所帮助。有关详细信息，请参阅http://docs.jquery.com/Ajax/jQuery.get

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

5 个答案: