jQuery AJAX与IE8

Question

我试图通过$.ajax用户提交表单来实现get请求.

我不确定我所做的是最有效的方法(将点击绑定到表单按钮)所以如果有更有效的方法(或标准方式),请建议它!

我的结果是内容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

您应该将提交按钮更改为按钮类型。提交类型的输入会自动发布页面，在您的情况下，这是不必要的。

<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);
    }
});