jQuery AJAX с IE8

Question

Я пытаюсь реализовать запрос на получение через $.ajax при отправке пользователем формы.

Я не уверен, что то, что я делаю, является наиболее эффективным методом (привязка клика к кнопке формы), поэтому, если есть более эффективный способ (или стандартный способ), предложите его!

В результате получается, что содержимое div заполнено правильно в FF/Chrome, но IE это не так. Кажется, что IE представляет форму и полностью перезагружает страницу.

Кроме того, я действительно думаю, что мне нужно «отправить» форму, потому что я хочу использовать jQuery validate();, который не работает с реализацией ниже (даже в 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

Вы должны изменить кнопку отправки, чтобы быть кнопки типа. Входы типа submit автоматически отправляют страницу, и в вашем случае это необязательно.

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

В противном случае вы можете предотвратить действие по умолчанию кнопки с помощью 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); 
     } 
    }); 
}); 

Поскольку вы ожидаете HTML от сервера, то лучше указать dataType, что вы ожидаете на самом деле HTML. Обратите внимание, что раньше у вас был json, который был dataType. Вы также можете указать тип данных, которые вы передаете на сервер, используя contentType, который в вашем случае json, поэтому вы должны использовать application/json.

В ваших комментариях ваш dataType должен быть json.

Я просто заметил, что кажется, что ваш $(document).ready(function() {});, кажется, не закрыт. Вы, казалось, забыли );. Это проблема с копией?

После вашего последнего изменения кода у вас, кажется, отсутствует запятая между вашим успехом и ошибкой.

$.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

Вы должны связать на представить события формы, и отменить событие по умолчанию - который направляющая форме (либо event.preventDefault() или просто return false;, который 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; 
}); 

заметить также, что json должна быть строка 'json' в dataType. Вы также можете рассмотреть возможность использования getJSON(). Я также очистил ненужные символы от кода.

Answer 3

Я, наконец, попытался назвать свободной стоячую функцию:

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

Я потерял пару ДНЕЙ по этой проблеме! Кошмар закончился.Может быть, IE8 не доверяет иностранному контенту, поэтому запрещает вставлять новый контент из AJAX, а уже существующая функция имеет больше мощности и меньше проблем с безопасностью браузера?

О, Yeh, а также проверить event.preventDefault() держать submit() действие принимать по