Jquery和Ajax

1、  ajax基础知识（http://www.0377joyous.com/archives/484.html）

2、  load()函数示例代码

<button id=”send”>触发</button>

<div class=”content”></div>

<script type=”text/javascript”>

/*$(function(){

$(“#send”).click(function(){

$(“.content”).load(“load.php?id=2”);//这里相当于访问了服务器然后返回纯html给这个页面，注意需要样式的话当然也在当前页面定义

});

});*/

//load.php页面很多内容，我只需要部分内容可以吗？

/*$(function(){

$(“#send”).click(function(){

$(“.content”).load(“load.php?id=2 .select”);//这里和上面只是多了一个.select;这里只是显示load.php页面中class=select那个区域的内容

});

});*/

//传递参数get和post传递

//get上面那样就可以

/*$(function(){

$(“#send”).click(function(){

$(“.content”).load(“load.php #post”,{name:”姓名”,age:”22″})

});

});*/

//回调函数，等待加载完成之后才能继续的操作，可以放在回调函数中执行.注意这个函数三个参数：返回的内容、请求状态、xmlhttprequest对象

</script>

而load.php页面代码如下：

<?php

echo “这里的内容是被加载的”.$_GET[‘id’];

?>

<br />

这是纯html

<div>

这是选中的内容

</div>

<div id=”post”>

这是POST传递测试

<?php

echo $_POST[‘name’].”年龄”.$_POST[‘age’];

?>

3、  get和post方法代码示例：

<form action=”#” id=”myform”>

留言标题：<input name=”title” id=”title” type=”text” /><br />

留言内容：<textarea name=”content” id=”content” rows=”2″ cols=”40″></textarea><br />

<input name=”sub” id=”send” value=”提交” type=”submit” />

</form>

<div class=”comment”>

<!–//评论内容显示–>

</div>

<script type=”text/javascript”>

//get的参数url地址，数据，回调函数，数据类型

//回调函数有两个 参数返回的内容，请求状态

/*$(“#send”).click(function(){

$.get(“get.php”, {

title: $(“#title”).val(),

content: $(“#content”).val()},function(data,textStatus){

$(“.comment”).html(data);

});

return false;

});*/

//post代码,get和post完全可以用load函数实现

$(“#send”).click(function(){

$.post(“get.php”, {

title : $(“#title”).val(),

content : $(“#content”).val()},function(data,textStatus){

$(“.comment”).append(data);

});

return false;

});

</script>

其中get.php代码如下：

<?php

//这里进行存入数据库操作

echo “POST数据：”;print_r($_POST);

echo “GET数据:”;print_r($_GET);

?>

4、  序列化元素

可以把上面的例子中js改写成

$(“#send”).click(function(){

//serialize()是序列化函数

$.post(“get.php”, $(“#myform”).serialize(),function(data,textStatus){

$(“.comment”).append(data);

});

return false;

});