Question

我正在开发一个Web应用程序，要求用户通过输入StudentID和JobID来添加“应用程序”。我正在使用jQuery让用户知道他们输入的学生不存在，作业不存在，应用程序是否已存在于数据库中或应用程序是否已成功添加。我使用PHP检查后端的所有内容，并将消息发送到前端以向用户显示该消息。

一切正常，直到if语句用于根据从后端收到的消息决定我将向用户显示的消息。

jQuery完全忽略了'else if'语句。如果第一个条件成立，它会成功执行它的主体，但是，如果第一个条件不成立，它会直接进入else语句，忽略else if语句，即使它们是真的。

以下是代码：

var myData = {"tablename": tablename, "StudentId": StudentId, "JobId": JobId};
            $.ajax({
                url: "insert.php",
                type: "POST",
                data: myData,
                success: function (data, status, xhr) {
                    console.log(data);
                    if (data =="success") {
                        $('#message').fadeIn().delay(3000).fadeOut();
                        $('#StudentId').val('');
                        $('#JobId').val('');
                    } else if(data=="fail") {

                        $('#message5').fadeIn().delay(3000).fadeOut();

                    } else if (data =="student"){

                        $('#message2').fadeIn().delay(3000).fadeOut();
                    }
                      else if (data == "job"){

                        $('#message3').fadeIn().delay(3000).fadeOut();
                    }
                      else  {

                        $('#message4').fadeIn().delay(3000).fadeOut();
                    }
                }

            });

Answer 1

为什么不使用switch声明？我建议你使用它。 switch语句用于根据不同的条件执行不同的操作。

现在你的代码应该可行了。这是解决方案：

switch(data){
        case "success":
          $('#message').fadeIn().delay(3000).fadeOut();
          $('#StudentId').val('');
          $('#JobId').val('');
          break;
       case "fail":
          $('#message5').fadeIn().delay(3000).fadeOut();  
          break;
       case "student":
          $('#message2').fadeIn().delay(3000).fadeOut();
          break;
       case "job":
          $('#message3').fadeIn().delay(3000).fadeOut();
          break;
       case "studentjob":
          $('#message4').fadeIn().delay(3000).fadeOut();
          break;                
}

Answer 2

作为测试方法的一个例子，我为你创建了一个plunker

一个简单的策略是创建测试按钮，强制要测试的响应，并将其混合直到它正常工作。理想情况下，你会创建单元测试并对其进行测试，但我可以想象你正在做的事情是非常简单的去那条路。

E.g。来自plunkr：

<强> HTML

<div>
  <button onclick="testSuccess()">Success</button>
  <button onclick="testFail()">Fail</button>
  <button onclick="testStudent()">Student</button>
  <button onclick="testJob()">Job</button>
  <button onclick="testStudentJob()">Student Job</button>
  <button onclick="testUnexpected()">Unexpected</button>
</div>

<强>的JavaScript

var testSuccess = function() {
  successFn("success");
}

var testFail = function() {
  successFn("fail");
}

var testStudent = function() {
  successFn("student");
}

var testJob = function() {
  successFn("job");
}

var testStudentJob = function() {
  successFn("studentjob");
}

var testUnexpected = function() {
  successFn("somethingSilly");
}

重构你的http电话：

var myData = {"tablename": tablename, "StudentId": StudentId, "JobId": JobId};
            $.ajax({
                url: "insert.php",
                type: "POST",
                data: myData,
                success: successFn 
            });

并略微修改你的if-else（强烈推荐与Alexandru Mihai建议切换语句一起使用）

 var successFn = function (data, status, xhr) {
                console.log(data);
                if (data =="success") {
                    $('#message').fadeIn().delay(3000).fadeOut();
                    $('#StudentId').val('');
                    $('#JobId').val('');
                } 
                else if(data=="fail") {

                    $('#message5').fadeIn().delay(3000).fadeOut();

                } 
                else if (data =="student"){

                    $('#message2').fadeIn().delay(3000).fadeOut();
                }
                else if (data == "job"){

                    $('#message3').fadeIn().delay(3000).fadeOut();
                }
                else if (data == "studentjob") {

                    $('#message4').fadeIn().delay(3000).fadeOut();
                }
                else {
                  alert('Unexpected response');
                }
            };

https://plnkr.co/edit/KZrWMrcybko6P32yFopz

Answer 3

if-block中有错误，最后一个else有条件。这应该在控制台中显示为错误。

将else (data == "studentjob")更改为

else

或

else if (data == "studentjob")

jQuery忽略else if语句

3 个答案: