为什么div在IE中无法被正确填充？

我试图在用户提交表单时通过$.ajax实现GET请求。

我不确定我所做的是否是最有效的方法(将点击绑定到表单按钮)，所以如果有更有效的方法(或标准方法)，请帮帮我！

我的结果是内容div被正确地填充在FF/Chrome中，但在IE中不会，IE似乎正在提交表单并重新加载了页面。

此外，我确实认为我需要“提交”表单，因为我想利用jQueryValue()；它不适用于下面的实现(甚至在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>

You should change your submit button to be of type button. Inputs of type submit automatically post the page and in your case this is not necessary.

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

Otherwise you can prevent the default action of the button using 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);
        }
    });
});

Since you are expecting html back from the server, it is best to specify the dataType that you are expecting is actually html. Note, you previously had json to be the dataType. You can also specify the type of data you are passing to the server using contentType which in your case is json so you should use application/json.

Per your comments, your dataType should be json.

I just noticed that it seems your $(document).ready(function() {}); does not seem to be closed. You seemed to have forgot the );. Is this a copy paste issue?

After your most recent code edit, you seem to be missing a comma between your success and error.

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

You should bind on the submit event of the form, and cancel the default event - which is submitting the form (either by event.preventDefault() or simply return false;, which 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;
});

Also notice that json should be the string 'json' in dataType. You could also consider using getJSON(). I also cleaned some unnecessary characters from the code.

I finally tried calling a free-standing function:

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

I lost a couple of DAYS on this problem! Nightmare over. Maybe IE8 doesn't trust foreign content so disallows inserting new content from AJAX, while an already existing function has more power and less browser security issues?

Oh, yeh, also check out event.preventDefault() to keep the submit() action from taking over