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

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

<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）。< / p>

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

我在这个问题上失去了几个 DAYS ！梦魇结束了。也许IE8不信任外国内容所以不允许从AJAX插入新内容，而现有的功能有更多的功能和更少的浏览器安全问题？

哦，是的，也请查看event.preventDefault()以阻止submit()行动接管

jQuery AJAX与IE8

3 个答案: