jQuery AJAX con IE8

Question

Estoy intentando implementar una solicitud de obtención a través del $.ajax sobre el usuario que envía un formulario.

No estoy seguro de si lo que estoy haciendo es el método más eficiente (vinculando un clic al botón de formulario) así que si hay una manera más eficiente (o estándar), ¡sugiérala!

Mi resultado es que el contenido div se llena correctamente en FF/Chrome, pero IE no lo es. IE parece estar enviando el formulario y recargando la página por completo.

Además, realmente creo que necesito "enviar" el formulario, porque quiero aprovechar jQuery validate(); que no funciona con la implementación a continuación (incluso en FF/Chrome).

Javascript:

$(document).ready(function(){ 

    $("#theForm").submit(function(){ 
     // build our data to send in our request 
     var mydata = {method: "search", color: $('#color').val()}; 

     $.ajax({ 
      url: 'foo.php', 
      data: mydata, 
      type: 'get', 
      dataType: 'json', 
      success: function(data){ 
       $("#content").html(data); 
      } 
      error: function(e){ 
      console.log(e.message); 
      } 
     }); 
    return false; 
    }); 
}); 

HTML:

<form id="search"> 
     <input type="submit" /> 
</form> 

<div id="content"></div> 

Answer 1

debe cambiar su botón de enviar para ser de tipo botón. Las entradas de tipo enviar automáticamente publican la página y en su caso esto no es necesario.

<input type="button" id="search-button"> 

lo contrario, puede prevenir la acción predeterminada del botón utilizando event.preventDefault().

$("#search-button").click(function(event){ 
    event.preventDefault(); 

    $.ajax({ 
     url: 'foo.php', 
     data: mydata, 
     type: 'get', 
     dataType: 'json', 
     contentType: 'application/json', 
     success: function(data){ 
      $("#content").html(data); 
     } 
    }); 
}); 

Puesto que usted está esperando HTML desde el servidor, lo mejor es especificar el dataType que usted está esperando es en realidad html. Tenga en cuenta que anteriormente tenía json para ser el dataType. También puede especificar el tipo de datos que está pasando al servidor usando contentType, que en su caso es json, por lo que debe usar application/json.

Según sus comentarios, su dataType debería ser json.

Me acabo de dar cuenta de que parece que su $(document).ready(function() {}); no parece estar cerrado. Parecía haber olvidado el );. ¿Es esto un problema de copiar y pegar?

Después de su edición de código más reciente, parece que le falta una coma entre su éxito y error.

$.ajax({ 
    url: 'foo.php', 
    data: mydata, 
    type: 'get', 
    dataType: 'json', 
    success: function(data){ 
     $("#content").html(data); 
    }, // <--- 
    error: function(e){ 
     console.log(e.message); 
    } 
}); 

Answer 2

Usted debe unirse en el caso de envío del formulario, y cancelar el evento por defecto - que se somete la forma (ya sea por event.preventDefault() o simplemente return false;, que will also stop propagation).

<form id="theForm"> 
<input type="submit" id="search-button"> 
</form> 


$("#theForm").submit(function(){ 

$.ajax({ 
    url: 'foo.php', 
    data: mydata, 
    type: 'get', 
    dataType: 'json', 
    success: function(data){ 
      $("#content").html(data); 
     } 
    }); 

    return false; 
}); 

Observe también que json debería ser la cadena 'json' en dataType. También podría considerar usar getJSON(). También limpié algunos caracteres innecesarios del código.

Answer 3

finalmente trató de llamar a una función de independiente:

$.ajax({ 
    ... 
    ,success: function(data){ 
     updCont(data) 
    } 
... 
}); 
function updCont(htm){ 
    $("#content").html(htm); 
} 

he perdido un par de DÍAS sobre este problema! Pesadilla terminada.Quizás IE8 no confía en el contenido extranjero, por lo que no permite insertar contenido nuevo de AJAX, mientras que una función ya existente tiene más poder y menos problemas de seguridad del navegador.

Oh, Yeh, también echa un vistazo event.preventDefault() para mantener la acción submit() de asumir el control