Javascript - 如何避免长/丑if/else语句？

Question

我正在学习Javascript(主要使用JQuery),并想知道是否有人可以帮助我.

我编写了一个if/else语句来检查URL中是否出现特定字符串,然后根据字符串将表单内容发布到特定的php脚本.

问:我正在使用的代码有效,但是感觉笨拙且不必要的长! - 我认为必须有一个更简单的方法来写这个!？我已经浏览了一下,但大多数答案似乎只是提供代码,没有任何东西可以帮助我理解它是如何完成的..

我想要实现的是:

1. 用户完成4种注册表单之一(prereg1.html,prereg2.html,prereg3.html,prereg4.html)
2. 根据URL,if/else语句将表单数据发送到相应的PHP脚本(add_prereg1.php,add_prereg2.php等),该脚本将数据添加到电子邮件列表数据库(由活动监视器托管)

注意:我的PHP知识也很差 - 因为活动监视器列表每个都有唯一的ID,我可以让php在右侧列表中发布表单数据的唯一方法就是有4个单独的'prereg.php'脚本.我确定有一种方法可以让php脚本根据javasscript传递的变量找出要发布的列表,但这在现阶段有点超出我的意义!任何指针欢迎..

无论如何这里是if/else语句:

    if (document.location.href.indexOf('prereg1') > -1) {
           $.ajax({
                type: "POST",
                url: "bin/add_prereg1.php",
                data: 'name=' + name + '&email=' + email
            });
        } 

        else {
                if (document.location.href.indexOf('prereg2') > -1) {
                   $.ajax({
                        type: "POST",
                        url: "bin/add_prereg2.php",
                        data: 'name=' + name + '&email=' + email
                    });
                }

            else {
                if (document.location.href.indexOf('prereg3') > -1) {
                   $.ajax({
                        type: "POST",
                        url: "bin/add_prereg3.php",
                        data: 'name=' + name + '&email=' + email
                    });
                }

            else {
                    if (document.location.href.indexOf('prereg4') > -1) {
                       $.ajax({
                            type: "POST",
                            url: "bin/add_prereg4.php",
                            data: 'name=' + name + '&email=' + email
                        });
                    }
                }                   
            }
        }

谢谢你的帮助.

Answer 1

你可以使用for循环:

for (var i = 1; i <= 4; i++) {
    if (document.location.href.indexOf('prereg' + i) > -1) {
        $.ajax({
            type: "POST",
            url: "bin/add_prereg" + i +".php",
            data: 'name=' + name + '&email=' + email
        });

        break;
    }
}       

Answer 2

考虑一下:

var match = window.location.href.match( /prereg(\d)/ );

if ( match ) {
    $.ajax({
        type: 'POST',
        url: 'bin/add_prereg' + match[1] + '.php',
        data: 'name=' + name + '&email=' + email
    });
}

现场演示: http ://jsfiddle.net/4MWDm/

您只需在字符串中搜索序列"prereg"后跟一个数字.parens捕获数字,因此您可以使用它来访问它[1].

顺便说一下使用window.location而不是document.location.

document.location最初是一个只读属性,虽然Gecko浏览器也允许你分配它.对于跨浏览器安全性,请改用window.location.

资料来源:https://developer.mozilla.org/en/DOM/document.location

Answer 3

几乎所有的陈述都是一样的,所以你可以概括.

• 使用~技巧 - 否则返回falsy -1和thruthy.这与结合使用很有用indexOf.

• 接下来,这样的?:作品:如果是真实的,则a ? b : c返回,如果是假的.baca

不可否认,设置number变量仍然是重复的.

var href = location.href, // so that you don't have to
                          // write 'location.href' but only 'href'

    number = ~href.indexOf('prereg1') ? 1
           : ~href.indexOf('prereg2') ? 2 // if the first ~ returned falsy
           : ~href.indexOf('prereg3') ? 3 // etc.
           : ~href.indexOf('prereg4') ? 4 // etc.
           : null; // if all returned falsy

if(number) { // if not null (null is falsy so won't pass the 'if')
    $.ajax({
        type: "POST",
        url: "bin/add_prereg" + number + ".php",  // insert number
        data: 'name=' + name + '&email=' + email
    });
}