给新手的 jQuery Ajax 帖子答案

【问题标题】：jQuery Ajax post for newbie给新手的 jQuery Ajax 帖子
【发布时间】：2011-09-18 05:53:58
【问题描述】：

首先让我说我是 Ajax 的新手。我一直在阅读来自 jquery.com 的文章和一些教程，但我还没有弄清楚这对我想要实现的目标是如何工作的。

我正在尝试使用 Google 的 Weather API XML 获取搜索城市的天气，无需刷新页面。

我设法检索天气 XML 并解析数据，但每次我搜索不同的地方时，页面都会重新加载，因为我的天气小部件位于选项卡下。

这是我的 HTML 中的内容：

<script type="text/javascript">
$(document).ready(function(){
    // FOR THE TAB
    $('.tab_btn').live('click', function (e) {
        $('.tab_content').fadeIn();
    });


    $(".submit").click(function(){
    $.ajax({
        type : 'post',
        url:"weather.php", 
        datatype: "text",
        aysnc:false,
        success:function(result){
        $(".wedata").html(result);
        }});
    });

});
</script>
<style>.tab_content{display:none;}</style>
</head><body>
<input type="button" value="Show Content" class="tab_btn">
<div class="tab_content">
        <h2>Weather</h2>
    <form id="searchform" onKeyPress="return submitenter(this,event)" method="get"/>
    <input type="search" placeholder="City" name="city">
    <input  type="hidden" placeholder="Language" name="lang">
    <input type="submit" value="search" class="submit" style="width:100px">
    </form>
    <div id="weather" class="wedata">




    </div>
</div>

这是我正在处理的实际演示：http://downloadlive.org。

现在，如果我在搜索表单上添加action="weather.php"，我会得到结果，但我会被重定向到weather.php，这是合乎逻辑的。如果没有action="weather.php"，每次我搜索我所在的索引时，都会加起来/?city=CITY+NAME，这不应该。这应该添加到weather.php，获取结果，然后将它们检索回我的索引中，如果有意义的话？

这是我的 weather.php 的 php 代码：http://pastebin.com/aidXCeQg

可以在这里查看：http://downloadlive.org/weather.php

有人可以帮我解决这个问题吗？

非常感谢

【问题讨论】：

标签： php ajax jquery

【解决方案1】：

你只需要return false;来自click 事件处理程序。这将防止发生默认操作 - 在这种情况下，提交表单。此外，删除async: false 设置。您几乎不需要同步 ajax 请求。

$(".submit").click(function(){
    $.ajax({
        type : 'post',
        url:"weather.php", 
        datatype: "text",
        success: function(result){
            $(".wedata").html(result);
        }
    });

    return false;
});

您也可以将参数名称传递给回调，然后使用event.preventDefault() 来完成与上述相同的结果：

$(".submit").click(function(e){
    $.ajax({
        type : 'post',
        url:"weather.php", 
        datatype: "text",
        success: function(result){
            $(".wedata").html(result);
        }
    });

    e.preventDefault();
});

您需要使用POST 发送表单数据。使用.serialize() 非常容易做到这一点。

$(".submit").click(function(){
    $.ajax({
        type : 'post',
        url:"weather.php",
        data: $(this.form).serialize(),
        datatype: "text",
        success: function(result){
            $(".wedata").html(result);
        }
    });

    return false;
});

【讨论】：

一旦您的代码功能正常（即正确/工作），您应该将其发布到codereview.stackexchange.com 以获取有关如何改进它的建议。
非常感谢先生。这就是我一直在寻找的东西。搜索工作正常，但是一旦我搜索一次，我就无法再次搜索另一个城市。我更新了downloadlive.org。有什么简单的东西遗漏了吗？
顺便说一句，我注意到 e.preventDefault();不行吗？
你确定将回调的参数命名为e吗？
错过了。嗯，虽然这不是我想要的。这只是获取 weather.php 上的内容，无论搜索词是什么。这就像我正在加载weather.php