前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Jquery和Ajax

Jquery和Ajax

作者头像
苦咖啡
发布2018-05-07 17:51:32
1.2K0
发布2018-05-07 17:51:32
举报
文章被收录于专栏:我的博客我的博客

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;

});

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2012年10月5日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档