开发者

Question about jQuery and reload a page

开发者 https://www.devze.com 2023-03-02 04:26 出处:网络
this is a noob question, so, be generous with me please. Take for example Twitter. There\'s an input text form at the top for writing tweet and below the tweets list. If you write a new tweet and cli

this is a noob question, so, be generous with me please.

Take for example Twitter. There's an input text form at the top for writing tweet and below the tweets list. If you write a new tweet and click "Tweet" button, you'll see the your new tweet instantly in the tweet list, without reloading a page. I know this is a banal situation but by the way I want to ask you.

I've a page with a form at the top and below it there's a message list. When you fill the form and submit a new message the page it reloads and you see the updated message list with the new message. I want implement the sam开发者_如何学JAVAe technique that Twitter use. Maybe should I use jQuery, and send data to a page with $.post. Can you explain me something about?


As you are a beginner, I think the easiest way would be the one i'll describe. If you have this div (where you want the new feed to appear):

Markup:

<div id="feeds">
   <div class="feed"> Feed 1</div>
   <div class="feed"> Feed 2</div>
   <!-- Your new feed will appear here -->
</div>

Javascript:

$("div.feed:last").clone().appendTo("#feeds").load("newfeed.php?param1=val1");

Server (asuming php):

<? //newfeed.php
   $param1 = $_GET['param1'];
   $content = "Here put your latest feed";
   echo $content;
?>

And that's it.

Now I'll explain what we are doing in that javascript line

$("div.feed:last")      //Select the last div with class "feed"
   .clone()             //We clone it, to make space for the new feed
   .appendTo("#feeds")  //We add the clone to the final of the feed list 
   .load("newfeed.php?param1=val1");  //Load it's content with a value got from server

When you feel more confortable with jquery, use $.ajax instead. Hope this helps, cheers


Fred ,

you can use jquery ajax for the same ,

on the ajax success update your DOM html

http://api.jquery.com/jQuery.ajax/

0

精彩评论

暂无评论...
验证码 换一张
取 消