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