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

时间:2011-09-23 11:53:47

标签: javascript jquery

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

我编写了一个if / else语句,用于检查URL中是否显示特定字符​​串,然后根据字符串将表单内容发布到特定的php脚本。

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

我想要实现的目标是:

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

    感谢您的帮助。

10 个答案:

答案 0 :(得分:6)

你可以使用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;
    }
}       

答案 1 :(得分:6)

考虑一下:

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

答案 2 :(得分:5)

几乎所有陈述都是相同的,所以你可以概括。

  • 使用~技巧 - 它会返回-1的假,而不是其他。这与indexOf

  • 结合使用非常有用
  • 接下来,?:的工作方式如下:a ? b : c如果b是真实的,则返回a;如果canumber falsy。

不可否认,设置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 }); } 变量仍然是重复的。

{{1}}

答案 3 :(得分:4)

使用正则表达式可以将其简化为:

document.location.href.match(/prereg(.)/);
var index = RegExp.$1:

$.ajax({
    type: "POST",
    url: "bin/add_prereg" + index + ".php",
    data: 'name=' + name + '&email=' + email
});

答案 4 :(得分:2)

无需循环,您可以根据您的代码从URL本身获取索引,

var url=document.location.href;
var startIndex=url.indexOf('prereg'); 
var index=    url.substring(startIndex+5,1);//make sure your index is correct (not tested by me)



 $.ajax({
            type: "POST",
            url: "bin/add_prereg" + i +".php",
            data: 'name=' + name + '&email=' + email
  });

答案 5 :(得分:1)

首先,您只需使用else if { ... }代替else { if { ... } }。你在代码中做事的方式对我来说有点太复杂了。

我宁愿编写一个从位置字符串中提取“prereg”部分的函数,然后在此之后结束jQuery $.ajax调用(这样你就不需要将代码复制到所有的那么块,因为唯一的区别是AJAX请求的URL。)

如果正确提取了字符串(“prereg1”,“prereg2”等),您还可以使用switch语句而不是if / else-cascade。如果URL是唯一的不同,我认为不值得做任何流量控制。

答案 6 :(得分:1)

您可以使用其他编程语言(例如PHP)中已知的开关

    switch (document.location.href) {
case 'prereg1':
// Your code here
break;

case 'prereg2':
// Your code here
break;

case 'prereg3':
// Your code here
break;

case 'prereg4':
// Your code here
break;
}

它对代码的其余部分没有任何帮助,这仍然是重复的,但是对于所有嵌套的if / else语句,开关更具可读性。

答案 7 :(得分:0)

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

答案 8 :(得分:0)

您可以使用正则表达式从网址中提取所需的内容,如下所示:

var re=new RegExp(/prereg\d/);

var postUrl = 'bin/add_' + re.exec(document.location.href) + '.php';

$.ajax({
        type: "POST",
        url: postUrl ,
        data: 'name=' + name + '&email=' + email
       });

答案 9 :(得分:0)

只需从html文件名中获取数字,然后使用它构建您的网址:

$.ajax({
                var pagename = location.pathname;
                var formid = pagename.substring(7,10);
                var myurl = "bin/add_prereg" + formid + ".php";
                type: "POST",
                url: myurl,
                data: 'name=' + name + '&email=' + email
            });