Php jqueryajax新手帖子_Php_Ajax_Jquery

Php jqueryajax新手帖子

php ajax jquery

Php jqueryajax新手帖子,php,ajax,jquery,Php,Ajax,Jquery,首先，让我说我是Ajax新手。我一直在阅读jquery.com上的文章和一些教程，但我还没有弄清楚这是如何实现我想要实现的目标的我正在尝试使用Google的weather API XML获取搜索城市的天气，而无需页面刷新。我设法检索了天气XML并解析了数据，但每次我搜索不同的位置时，页面都会重新加载，因为我的天气小部件位于选项卡下这是我的HTML中的内容： <script type="text/javascript"> $(document).ready(function(){

首先，让我说我是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>


$（文档）.ready（函数（）{
//付账单
$（'.tab_btn'）.live（'click'，函数（e）{
$（'.tab_content'）.fadeIn（）；
});
$（“.submit”）。单击（函数（）{
$.ajax({
键入：“post”，
url:“weather.php”，
数据类型：“文本”，
aysnc：错，
成功：功能（结果）{
$（“.wedata”）.html（结果）；
}});
});
});
.tab_内容{显示：无；}
天气

这是我正在进行的实际演示：

现在，如果我在搜索表单上添加

action=“weather.php”

，我会得到结果，但会被重定向到weather.php，这是合乎逻辑的。如果没有

action=“weather.php”

，每次我搜索我所在的索引时，都会加上不应该加的

/？city=city+NAME

。这应该添加到weather.php中，获取结果，然后将其检索回我的索引，如果这样做有意义的话

这是我为weather.php编写的php代码：

可在此处查看：

有人能帮我解决这个问题吗

非常感谢

您只需要

返回false

；从

中单击事件处理程序。这将防止发生默认操作-在本例中，是提交表单。另外，删除async:false
设置。您几乎不需要同步ajax请求
$(".submit").click(function(){
    $.ajax({
        type : 'post',
        url:"weather.php", 
        datatype: "text",
        success: function(result){
            $(".wedata").html(result);
        }
    });

    return false;
});

或者，您可以将参数名传递给回调，然后使用以实现与上述相同的结果：
$(".submit").click(function(e){
    $.ajax({
        type : 'post',
        url:"weather.php", 
        datatype: "text",
        success: function(result){
            $(".wedata").html(result);
        }
    });

    e.preventDefault();
});


您需要使用POST
发送表单数据。这是超级容易做到这一点使用
一旦你得到了代码的功能（也就是说，正确/有效），你应该将其发布到，以获得关于如何改进它的建议。非常感谢先生。这就是我一直在寻找的东西。搜索工作做得很好，但是一旦我搜索了一次，我就不能再搜索另一个城市了。我更新了。还有什么简单的东西遗漏了吗？顺便说一句，我注意到e.preventDefault（）；不起作用？您是否确保命名回调的参数e？忽略了这一点。嗯，看来这不是我想要的。这只是得到weather.php上的内容，不管搜索词是什么。就像我正在加载weather.php一样
$(".submit").click(function(){
    $.ajax({
        type : 'post',
        url:"weather.php",
        data: $(this.form).serialize(),
        datatype: "text",
        success: function(result){
            $(".wedata").html(result);
        }
    });

    return false;
});