jQuery AJAX 与 IE8

Question

我正在尝试在用户提交表单时通过 $.ajax 实现获取请求。

我不确定我正在做的是否是最有效的方法(将点击绑定(bind)到表单按钮)，因此如果有更有效的方法(或标准方法)，请提出建议!

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

根据您的评论，您的数据类型应该是 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);
    }
});