6

我正在尝试通过$.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>
4

3 回答 3

3

您应该将提交按钮更改为按钮类型。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);
    }
});
于 2012-06-15T18:34:07.587 回答
0

我终于尝试调用一个独立的函数：

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

我在这个问题上失去了几天！噩梦结束。也许 IE8 不信任外来内容，因此不允许从 AJAX 插入新内容，而现有的功能具有更强大的功能和更少的浏览器安全问题？

哦，是的，还要检查event.preventDefault()以防止submit()操作接管

于 2013-08-13T17:40:11.513 回答
0

您应该绑定表单的提交事件，并取消默认事件 - 提交表单（通过event.preventDefault()或简单地return false;，这也将停止传播）。

<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(). 我还从代码中清除了一些不必要的字符。

于 2012-06-15T18:35:27.230 回答