Why doesn't my jQuery code work in Firefox and Chrome?

问题

EDITED

Hi, I use masterpage. And I use formsauthentication in my project. I pull my data from SQL Server 2005. then in login.aspx, I call my pagemethod from jQuery. After all, I run my project in IE9.0, Chrome and Firefox. The project is correct. But this jQuery code is working only IE9.0.

My pagemethod, which is named LoginService, returns "0" or returnURL like "user/Default.aspx", then I control this tah if return of LoginService isn't "0" success will run the following:

alert("there isnt error: " + msg.d);

but, if there is an error, this will run:

alert("there is error: " + msg.d);

It is very interesting that

if I run this project in IE9, message shown like "there isnt error: user/Default.aspx"

but,

if I run this project in Chrome or Firefox, message shown like "there is error: undefined"

how can I run this project in all browsers?

<script type="text/javascript">
  jQuery(document).ready(function () {
    jQuery("#myContent_login").focus();
    jQuery("#myContent_submit_image").click(function () {
      jQuery("#login_form_spinner").show();
      jQuery.ajax({
        type: "POST",
        url: "Logon.aspx/LoginService",
        data: "{'username': '" + jQuery("#myContent_login").val() + "', 'password': '" + jQuery("#myContent_password").val() + "','isRemember': '" + jQuery("#myContent_remember_me").is(':checked') + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
          if (msg.d != 0) {
            alert("there isnt error: " + msg.d);
          }
        },
        error: function (msg) {
          alert("have error: " + msg.d);
        }
      });
    });
  });
</script>

回答1:

Make sure you return false from your click handler to cancel the default submit:

jQuery("#myContent_submit_image").click(function () {

    jQuery('#login_form_spinner').show();
    jQuery.ajax({
        type: "POST",
        url: "Logon.aspx/LoginService",
        data: "{'username': '" + jQuery("#myContent_login").val() + "', 'password': '" + jQuery("#myContent_password").val() + "','isRemember': '" + jQuery("#myContent_remember_me").is(':checked') + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            if (msg.d != 0) {
                window.location.replace(msg.d);
            }
        },
        error: function (msg) {
            alert(msg.d);
        }
    });

    return false; // THIS IS VERY IMPORTANT
});

Also cleanup your AJAX call in order to properly encode parameters, like this:

jQuery("#myContent_submit_image").click(function () {
    jQuery('#login_form_spinner').show();
    jQuery.ajax({
        type: "POST",
        url: "Logon.aspx/LoginService",
        data: JSON.stringify({
            username: jQuery("#myContent_login").val(), 
            password: jQuery("#myContent_password").val(),
            isRemember: jQuery("#myContent_remember_me").is(':checked')
        }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            if (msg.d != 0) {
                window.location.replace(msg.d);
            }
        },
        error: function (msg) {
            alert(msg.d);
        }
    });

    return false; // THIS IS VERY IMPORTANT
});

回答2:

Just a quick observation:

jQuery('login_form_spinner')

you need a # or a . in front of login_form_spinner.

Update:

you can look here for an example. Note that the success and erro functions are different than you're example.

I can help more but would need to know the specific error.

回答3:

like justin said you where missing the has or dot also mad changes to your data object

<script type="text/javascript">
jQuery(document).ready(function ($) {
    $("#myContent_login").focus();
    $("#myContent_submit_image").click(function () {
        $('#login_form_spinner').show();
        $.ajax({
            type: "POST",
            url: "Logon.aspx/LoginService",
            data: {
                "username":$("#myContent_login").val(),
                "password":$("#myContent_password").val(),
                "isRemember":$("#myContent_remember_me").is(':checked')
            },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {
                if (msg.d != 0) {
                alert("there isnt error: " + msg.d);
                }
            },
            error: function (msg) {
                alert("have error: " + msg.d);
            }
        });
    });
});
</script>

but I suspect that your not returning json header or something like that

回答4:

Check the documentation for jQuery.ajax carefully, and you'll see that success and error use different arguments:

success(data, textStatus, jqXHR)
error(jqXHR, textStatus, errorThrown)

So your error handler should look like this:

error: function (jqXHR, status, error) {
    alert("have error: " + status);
}

Once you're successfully getting the error message, you can figure out what's causing the error.

回答5:

In this line

jQuery('login_form_spinner').show();

Is it a typo in the post or in your original code? I am assuming your are missing a "#" for your selector. Since IE handles this kind of error differently from FF and Chrome. You get different behavior across browsers.

来源：https://stackoverflow.com/questions/5478268/why-doesnt-my-jquery-code-work-in-firefox-and-chrome