如何从服务器端更改客户端javascript的变量？

Question

我从某个网站的登录页面代码中汲取了灵感。 我找到了一个我不知道如何实现的功能。

该登录页面使用两种输入控件的形式收集用户名和密码：

<form method="post" runat="server" action="myLogin.aspx">

    <input type="text" class="us_name" name="txtUserName" id="txtUserName" value="" />

    <input type="password" class="us_pwd" name="txtPassword" id="txtPassword" value="" />
</form>

在该页面中，我还找到了一些类似以下的JQuery代码：

 <script language="javascript" type="text/javascript">
     $(document).ready(function () {
         var error = 0;
         if (error > 0) {
             switch (error) {
                 case 1:
                     $("#ListMsg").html("username and pwd can not be empty");
                     $("#txtUserName").focus();
                     break;
                 case 2:
                     $("#ListMsg").html("Pic code can not be empty");
                     $("#txtCheckCode").focus();
                     break;
                 case 3:
                     $("#ListMsg").html("Pic code err");
                     $("#txtCheckCode").focus();
                     break;
                 case 36006:
                     $("#ListMsg").html("username err");
                     $("#txtCheckCode").focus();
                     break;
                 case 36007:
                     $("#ListMsg").html("password err");
                     $("#txtCheckCode").focus();
                     break;
                 case 20012:
                     $("#ListMsg").html("account is lock");
                     $("#txtCheckCode").focus();
                     break;
                 case 10007:
                     $("#ListMsg").html("can not access");
                     $("#txtCheckCode").focus();
                     break;
                 default:
                     $("#ListMsg").html("username or password err");
                     $("#txtPassword").focus();
                     break;
             }
         }
     });

上面的代码似乎是在登录失败时显示错误消息，但是请注意以下语句：

    var error = 0;

当我输入错误的密码并查看页面源代码时，我发现它已自动更改为：

    var error = 36007;

我猜想登录失败时必须由服务器端代码更改此变量，并使用它来指示失败原因。 但是我不知道服务器如何设置客户端JQuery变量的值，有人可以举一个例子吗？

Answer 1

您可以使用ajax来促进脚本和php服务器之间的通信，而无需更改页面。 当用户单击登录按钮时，您可以将其输入值作为ajax帖子发送。 考虑以下示例：

$( '#btn-login' ).click( function () {
     $.ajax({
          url: "your.server.address/function_that_sends_those_codes",
          data: {
                    userID: $( '#txtUserName' ).val(),
                    pwd: $( '#txtPassword' ).val()
                },
          type: 'POST',
          dataType: 'JSON',

          success: function ( response ) {
                                    error = response.errCode; //or whatever your server
                                                              //sends
                                },
          error: function ( errorMsg ) {
                                    console.log( errorMsg );
                             }
     });
});

在您的php代码中，您检索使用$_POST[ 'userID' ]和$_POST[ 'pwd' ] 。 您可以通过与数据库进行交互来计算代码，然后执行以下操作：

echo json_encode( array( yourErrorCode ) );

“ yourErrorCode”作为“响应”发送到您的“成功”回调函数。 您可以在浏览器的控制台中查看收到的响应或引发的任何错误。

快乐的编码:)

Answer 2

要从后面的代码中设置javascript变量，您可以注册客户端脚本 。 像这样：

 ScriptManager.RegisterStartupScript(this, this.GetType(), "", "error = 36007;", true);