Javascript 构造http请求-优快云博客

本文链接：https://blog.youkuaiyun.com/xinzhengLUCK/article/details/142996637

构造HTTP请求有多种方式，此种为使用javascript 构造http请求的方法

web/static/js/user/login.js

;
var user_login_ops = {
    init:function(){
        this.eventBind();
    },
    eventBind:function(){
        $(".login_wrap .do-login").click( function(){
            var btn_target = $(this);
            if( btn_target.hasClass("disabled") ){
                common_ops.alert("正在处理!!请不要重复提交~~");
                return;
            }

            var login_name = $(".login_wrap input[name=login_name]").val();
            var login_pwd = $(".login_wrap input[name=login_pwd]").val();


            if( login_name == undefined || login_name.length < 1){
                common_ops.alert( "请输入正确的登录用户名~~" );
                return;
            }
            if( login_pwd == undefined || login_pwd.length < 1){
                common_ops.alert( "请输入正确的密码~~" );
                return;
            }
            btn_target.addClass("disabled");
            $.ajax({
                url:common_ops.buildUrl("/user/login"),
                type:'POST',
                data:{ 'login_name':login_name,'login_pwd':login_pwd },
                dataType:'json',
                success:function(res){
                    btn_target.removeClass("disabled");
                    var callback = null;
                    if( res.code == 200 ){
                        callback = function(){
                            window.location.href = common_ops.buildUrl("/index");
                        }
                    }
                    common_ops.alert( res.msg,callback );
                }
            });
        } );
    }
};

$(document).ready( function(){
    user_login_ops.init();
} );

1 为什么在上段代码中if判断条件后面都有个reutrn;

在JavaScript（以及许多其他编程语言）中，return语句用于从函数中返回一个值，并且立即终止函数的执行。在上段代码中，return语句被用在if判断条件的后面，目的是为了在满足特定条件时提前退出当前的函数或事件处理器。

具体到你提供的登录功能的代码片段中，return语句被用来处理以下情况：

防止重复提交：

if( btn_target.hasClass("disabled") ){  
    common_ops.alert("正在处理!!请不要重复提交~~");  
    return; // 如果按钮已被禁用，显示提示信息并退出函数  
}

这里，如果登录按钮（btn_target）已经有disabled类（意味着它可能已经被点击过，并且正在处理登录请求），则显示一个提示信息给用户，并通过return语句退出当前的点击事件处理器，从而防止重复提交。

2. 验证输入：

if( login_name == undefined || login_name.length < 1){  
    common_ops.alert( "请输入正确的登录用户名~~" );  
    return; // 如果用户名无效，显示提示信息并退出函数  
}  
if( login_pwd == undefined || login_pwd.length < 1){  
    common_ops.alert( "请输入正确的密码~~" );  
    return; // 如果密码无效，显示提示信息并退出函数  
}

在这两个if语句中，代码检查用户名（login_name）和密码（login_pwd）是否有效。如果任何一个无效（即未定义或长度小于1），则显示一个相应的提示信息，并通过return语句退出函数，从而阻止后续的登录请求。

使用return语句在这些情况下是一种很好的实践，因为它可以防止代码在不满足前提条件的情况下继续执行，从而避免潜在的错误或不必要的操作。这也使得代码更加清晰和易于理解，因为读者可以立即看到在满足特定条件时函数将如何退出。

2、代码中为什么都是input[name= ] 而不是input[password = ]

在上段代码中，使用了jQuery选择器来获取登录表单中的用户名和密码。选择器的写法是根据HTML元素的属性来确定的。

var login_name = $(".login_wrap input[name=login_name]").val();  
var login_pwd = $(".login_wrap input[name=login_pwd]").val();

这里，input[name=login_name] 和 input[name=login_pwd] 分别选择了name属性为login_name和login_pwd的input元素。这种写法是基于HTML表单元素的常见实践，其中name属性用于在表单提交时标识每个输入字段。

为什么不用 input[password=] 呢？

HTML标准：password 并不是input元素的一个可用于选择器的属性值，而是一个type属性的值。正确的选择器应该基于type属性，如果我们要选择密码输入框，应该使用 input[type=password]。
实践：在表单中，我们通常通过name属性来标识和引用输入字段，因为name属性在表单提交时会被发送到服务器，并且它允许我们在JavaScript中更具体地引用到某个字段，尤其是在有多个相同type的输入字段时。
安全性：使用type=password确实可以选择到密码输入框，但在JavaScript中直接引用密码字段（尤其是在选择器或变量命名中）可能会暴露代码的目的，从而潜在地降低安全性（尽管这不是一个主要的安全漏洞，但最好避免在代码中直接提及敏感信息）。

因此，正确的做法是使用input[type=password]来选择密码输入框，但在这个特定的例子中，作者可能已经有了另一个方式来标识密码输入框（比如通过name属性），或者他们只是遵循了使用name属性来选择表单字段的惯例。如果密码输入框的name属性是login_pwd（或类似的），那么使用input[name=login_pwd]是完全正确的。