Question

首先让我说我是Ajax的新手。我一直在阅读jquery.com上的文章和一些教程，但我还没想到它是如何实现我想要实现的目标。

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

我设法检索了Weather 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：http://pastebin.com/aidXCeQg

的php代码

可在此处查看：http://downloadlive.org/weather.php

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

非常感谢

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

新手的jQuery Ajax帖子

1 个答案: