$ .ajax第一次不工作

时间:2012-07-10 15:40:02

标签: javascript jquery ajax

我在html页面中有一个按钮。

<input type="image" src="images/login_button.png" id="imageButton" onclick="LoginButtonClick();" />

我在点击按钮时调用此方法:

LoginButtonClick = function() {
    alert ("Button click event raised");  // this alert msg raising every time when onclick event occurs.
    $.ajax({  
        alert ("Inside Ajax.");  // This alert not executing first 1 or 2 times.
        type: 'GET',
        url: 'http://URL/Service.svc/LoginValidation',
        dataType: 'json',
        error: pmamml.ajaxError,
        success: function(response, status, xhr) {
            if (response != "") {
                alert ("Response receive ");
                }
            else {
                alert("Invalid Data.");
            }
        }
    });
}

正如我上面提到的$.ajax首先没有工作2,按钮点击3次。

在mozilla中它会抛出错误“[Exception ...”组件返回失败代码:0x80004005(NS_ERROR_FAILURE)“nsresult:”0x80004005(NS_ERROR_FAILURE)“location:”JS frame :: JQuery.js :: :: line 20 “数据:没有”“

有没有办法解决这个问题..

4 个答案:

答案 0 :(得分:6)

我不确定为什么 稍后执行。但这是交易 - 您将警报放在定义.ajax方法参数的对象文字中。它不属于那里。尝试将警报放入您的成功和/或错误处理程序中。

<强>更新

你还等多久了?当您启动ajax请求时,它不会挂起UI。可能是您在第3次或第4次尝试时看到第一次点击的结果,并认为您是在第3次或第4次尝试时触发它。

答案 1 :(得分:0)

$.ajax()函数接收一组配置Ajax请求的键/值对作为参数。我认为将alert()置于其中是不正确的。

答案 2 :(得分:0)

注意 - 如果域不是当前域,则输入绝对路径不起作用 - 它与浏览器所遵循的Same Origin Policy相对 - 这可以解释为什么没有发生任何事情它被执行 - 我建议你在你的浏览器调试器中查看。

您应该像这样绑定点击事件:

$(document).ready(function() {
  $('#imageButton').click(function() {
    // code here
  });
});

所以你的完整代码将如下所示:

HTML

<input type="image" src="images/login_button.png" id="imageButton" />

的JavaScript

$(document).ready(function () {
  $('#imageButton').click(function () {
    alert("Button click event raised"); // this alert msg raising every time when onclick event occurs.
    $.ajax({
      type: 'GET',
      url: 'http://URL/Service.svc/LoginValidation',
      dataType: 'json',
      error: pmamml.ajaxError,
      success: function (response, status, xhr) {
        if (response != "") {
          alert("Response receive ");
        } else {
          alert("Invalid Data.");
        }
      }
    });
  });
});

我删除了alert ("Inside Ajax.");行,因为这不会被执行 - 你传递了一个参数的对象{}而不是要执行的代码。如果要在发送ajax请求之前执行,请执行以下操作:

$.ajax({
   beforeSend: function() {
     alert('inside ajax');
   }
   // other options here
});

Docs for the $.ajax() function are here

答案 3 :(得分:0)

我同意您在错误的位置发出第二个警报,并且不知道pmamml.ajaxError函数是什么,但可能是您的调用返回错误,因此您的成功警报未触发。您可以按如下方式检查错误并完成功能:

LoginButtonClick = function() {
alert ("Button click event raised");  // this alert msg raising every time when onclick event occurs.
$.ajax({  
    type: 'GET',
    url: 'http://URL/Service.svc/LoginValidation',
    dataType: 'json',
    error: function(jqXHR, textStatus, errorThrown){
          alert ("ajax call returns error: " + errorThrown);
    },
    success: function(response, status, xhr) {
        if (response != "") {
            alert ("Response receive ");
            }
        else {
            alert("Invalid Data.");
        }
    },
   complete:function(jqXHR, textStatus){
         alert('completed with either success or fail');
    }
});

}

您可以使用Google Chrome的开发者工具进行测试 - &gt;网络标签,如果发出请求并退回(https://developers.google.com/chrome-developer-tools/docs/network)