jQuery Ajax post for newbie_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-05 10:27 出处：网络

First let me say I\'m new to Ajax. I\'ve been reading articles from jquery.com and some tutorials but I didn\'t figured it out yet how this works on what I\'m trying to achieve.

相关专题：jquery php

First let me say I'm new to Ajax. I've been reading articles from jquery.com and some tutorials but I didn't figured it out yet how this works on what I'm trying to achieve.

I am trying to get the weather for a searched city using Google's Weather API XML, without page refresh.

I managed to retrieve the Weather XML and parse the data but everytime I search for a different place, the page reloads since my weather widget is under a tab.

This is what I have in my 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>

And here is the actual demo I'm working on: http://downloadlive.org.

Now, if I add action="weather.php" on the search form I get the results, but I get redirected to weather.php which is logical. Without the action="weather.php", everytime I search my index which I'm on, adds up /?city=CITY+NAME which shouldn't. This should be added to weather.php, get the results and then retrieve them back into my index, if that makes sense?

This is my php code for weather.php: http://pastebin.com/aidXCeQg

which can be viewed here: http://downloadlive.org/weather.php

Can someone please help me out with this please?

Thanks alot

You just need to return false; from the click event handler. This will prevent the default action from occuring - in this case, submitting the form. Also, remove the async: false setting. You almost never want synchronous ajax requests.

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

    return false;
});

Alternately you can pass a parameter name to the callback and then use event.preventDefault() to accomplish the same result as above:

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

    e.preventDefault();
});

You need to send the form data with the POST. It's super-easy to do this using .serialize().

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

    return false;
});