制作 Java Script 全局变量

Question

我正在使用 var 函数来创建变量，以便我可以在 PHP 中使用它们所以我可以使用 post 函数，基本上我在 javascript 中导入它们。

无论如何我如何使它们成为全局变量？

我尝试将它们包含在 document.ready 函数中，甚至在代码开始执行 document.ready 函数之前。它比在任何地方重复这些变量要整洁得多。

这里是代码

$(document).ready(function () {
    var user_login = $('#user_login').val();
    var user_pass = $('#pass_login').val();
    $('#field').keyup(function (e) {

        if (e.keyCode == 13) {

            //If enter is pressed vailidate the form
            e.preventDefault();
            $.ajax({

                url: 'ajax/check.php',
                type: 'post',
                data: {
                    user_login: user_login,
                    pass_login: user_pass
                },
                success: function (data) {
                    $('#content').html(data);
                }
            });
        };
    });

    $('#submit').click(function (e) {
        if (e.keyCode != 13) {


            $.ajax({

                url: 'ajax/check.php',
                type: 'post',
                data: {
                    user_login: user_login,
                    pass_login: user_pass
                },
                success: function (data) {
                    $('#content').html(data);
                }
            });
        }
    });

});

Answer 1

您可能不希望它们是全球性的，因为没有理由。由于您现在已经对此进行了编码，因此一旦文档准备好，变量将只被评估一次，这将在用户在您的表单字段中输入任何内容之前。您想在 onkeyup 处理程序或提交表单时评估它们，以便您拥有当前值。我不确定您的 check.php 是否确实如此，但它应该看起来像这样：

$(function(){
   $('form#theform').submit(function(e){
      e.preventDefault();
      var  user_login = $('#user_login').val(),
           user_pass = $('#pass_login').val();
      // you ajax submit here

   });

   $('#field').keyup(function(e){
       e.preventDefault();
       var  user_login = $('#user_login').val(),
            user_pass = $('#pass_login').val();
       // do your validation, if successful then do: $('theform').trigger('submit');
   });
});

您不想在这里使用全局变量的原因是您总是需要最新的输入。如果您使用全局变量，则无法判断您有最新的输入，因为事情会不同步。

Answer 2

每次要获取输入的当前值时，都需要在输入上调用.val()。如果您在开始时只调用一次，则变量不会在用户输入输入时保持最新。

做这样的事情：

$(document).ready(function() {
    // Make a function that returns the data, then call it whenever you
    // need the current values
    function getData() {
        return {
            user_login: $('#user_login').val(),
            user_pass: $('#pass_login').val()
        }
    }

    function check(e) {
        e.preventDefault();
        $.ajax({

            url: 'ajax/check.php',
            type: 'post',
            data: getData(), // get current values
            success: function (data) {
                $('#content').html(data);
            }
        });
    }

    // Don't repeat so much; use the same function for both handlers
    $('#field').keyup(function(e) {
        if (e.keyCode == 13) check(e);
    });

    $('#submit').click(function(e) {
        if (e.keyCode != 13) check(e);
    });

});

Answer 3

全球可能不是这里的路。听起来您对减少重复代码更感兴趣？您可以将当前代码重构为：

$(document).ready(function () {
    function submitForm() {
        var user_login = $('#user_login').val();
        var user_pass = $('#pass_login').val();

        $.ajax({
            url: 'ajax/check.php',
            type: 'post',
            data: {
                user_login: user_login,
                pass_login: user_pass
            },
            success: function (data) {
                $('#content').html(data);
            }
        });
    }

    $('#field').keyup(function (e) {
        if (e.keyCode == 13) {
            //If enter is pressed vailidate the form
            e.preventDefault();
            submitForm();
        };
    });

    $('#submit').click(function (e) {
        if (e.keyCode != 13) {
            submitForm();
        }
    });
});