JavaScript与PHP无法配合使用

Question

我正在使用一段PHP脚本，根据用户输入的数据返回“y”或“n”，这些数据通过变量uname和pass传递。 我使用ajax的$.get()方法来调用php脚本。

如果我尝试在$.get()方法中输出数据，它可以完美工作，但当我使用if语句与“y”或“n”进行比较时会出现问题。以下是我的代码：

    var status;
    $('#login').click(function(){
    $.get("login.php", { uname: document.getElementById('uname').value, pass: document.getElementById('pass').value } )
    .done(function( data ) {
        status=data;
        alert(status);  //This works
    });

    if(status=='y')
    {
        alert('yes!');    //This is not working
        // window.location.replace("welcome.html");
    }
    else if(status=='n')
    {
        alert('no!');     //This is not working
    }
});

任何帮助都将不胜感激。

- Pranav

---

不建议混合使用传统JS和jQuery；您可以将document.getElementById('uname').value替换为$('#uname').val()。 - Raptor

尝试把警告放在done()回调函数内部了吗？ - Aditya

@Raptor 当然没问题。已经修改了！ :) - Pranav

Answer 1

将您的if条件移至ajax内部，以适应ajax的异步特性：

var status;
  $('#login').click(function(){
  $.get("login.php", { uname: document.getElementById('uname').value, pass: document.getElementById('pass').value } )
  .done(function( data ) {
      status=data;

        if(status=='y')
        {
          alert('yes!');
        }
        else if(status=='n')
        {
          alert('no!');
        }      
  });
});

- Dev01

---

你应该将 This is not working 替换为 This is now working。说谎的注释 bug，最糟糕的 bug！ :D - Amadan

非常感谢！我没有想到那个！有没有办法防止页面在此之后刷新？而且似乎每隔一次才会起作用。 （我猜是因为刷新的缘故？） - Pranav

@Pranav：我看到你有页面刷新的代码，你需要删除像window.location.replace或window.location.reload等会导致页面刷新的代码。 - Dev01

不是这样，在另一种情况下，我想放一些代码来改变当前页面的 CSS。现在发生的是它会更改并立即刷新页面到其原始状态。 - Pranav

@Pranav ~ 将 $('#login').click(function(){ 替换为 $('#login').click(function(e){e.preventDefault();，这将阻止我假设的表单在同时进行 AJAX 请求时进行提交。这应该解决您的页面重新加载问题。 - Pebbl

@pebbl 非常感谢你！:) - Pranav

Answer 2

这是一个典型的异步问题。你发送一个请求，然后将未返回的结果与一些字符串进行比较，接着响应到达 - 但已经太晚了，无法起作用。你在检查时太快了。把状态比较放在 done 回调函数里。

- Amadan

Answer 3

由于Ajax是异步的，当您的代码到达条件语句时，请求的代码可能还没有返回，因此变量状态可能尚未初始化。尝试在done函数内部放置条件语句，像这样：

因为Ajax是异步的，所以当您的代码到达条件语句时，请求的代码可能尚未返回，因此变量状态可能尚未初始化。

$('#login').click(function(){
$.get("login.php", { uname: document.getElementById('uname').value, pass:       document.getElementById('pass').value } )
.done(function( data ) {
    if(data =='y')
    {
        alert('yes!');
       // window.location.replace("welcome.html");
    }
    else if(data =='n')
    {
        alert('no!');
    }
});

我认为这应该可以解决问题;) ……如果需要进一步澄清，您可以访问jQuery ajax api文档：http://api.jquery.com/jquery.ajax/

- Anaximandro Andrade