正好项目中准备使用thickbox,于是干脆抛弃prototype.js,看起jquery.js了。JQuery确实不错,体积比Prototype小了许多,而且使用起来更方便更灵活。有人说Prototype像JAVA,正统;而JQuery像Ruby,灵活,更趋于OOP。
小试了下AJAX,感觉比prototype简洁多了,在JQuery中,AJAX有三种实现方式:$.ajax(),$.post,$.get()。
XHTML(主要):
<div id="result" style="background:orange;border:1px solid red;width:300px;height:400px;"></div>
<form id="formtest" action="" method="post">
<p><span>输入姓名:</span><input type="text" name="username" id="input1" /></p>
<p><span>输入年龄:</span><input type="text" name="age" id="input2" /></p>
<p><span>输入性别:</span><input type="text" name="sex" id="input3" /></p>
<p><span>输入工作:</span><input type="text" name="job" id="input4" /></p>
</form>
<button id="send_ajax">提交</button>
<button id="test_post">POST提交</button>
<button id="test_get">GET提交</button>
JS:
1、引入jquery框架:
<script type="text/javascript" src="../js/jquery.js"></script>
2、构建AJAX,JQUERY的好处是不需要在XHTML中使用JS代码来触发事件了,可以直接封装在JS文件中:
<script type="text/javascript">
//$.ajax()方式
$(document).ready(function (){
$('#send_ajax').click(function (){ //直接把onclick事件写在了JS中,而不需要混在XHTML中了
var params=$('input').serialize(); //序列化表单的值,与prototype中的form.serialize()相同
$.ajax({
url :'ajax_test.php', //后台处理程序
type:'post', //数据发送方式
dataType:'json', //接受数据格式
data:params, //要传递的数据
success:update_page //回传函数(这里是函数名)
});
});
});
function update_page (json) { //回传函数实体,参数为XMLhttpRequest.responseText
var str="姓名:"+json.username+"<br />";
str+="年龄:"+json.age+"<br />";
str+="性别:"+json.sex+"<br />";
str+="工作:"+json.job;
$("#result").html(str);
}
//$.post()方式:
$(function (){ //$(document).ready(function (){ 的简写
$('#test_post').click(function (){
$.post('ajax_test.php',
{username:$('#input1').val(),age:$('#input2').val(),sex:$('#input3').val(),job:$('#input4').val()},
function (data){ //回传函数
var myjson='';
eval('myjson='+data+';');
$('#result').html("姓名:"+myjson.username+"<br />工作:"+myjson['job']);
});
});
});
//$.get()方式:
$(function (){
$('#test_get').click(function (){
$.get('ajax_test.php',
{username:$("#input1").val(),age:$("#input2").val(),sex:$("#input3").val(),job:$("#input4").val()},
function (data) {
var myjson='';
eval("myjson="+data+";");
$("#result").html(myjson.job);
});
});
});
</script>
PHP代码:
<?php
$arr=$_POST; //若以$.get()方式发送数据,则要改成$_GET.或者干脆:$_REQUEST
$myjson=json_encode($arr);
echo $myjson;
?>
分享到:
- 2008-01-15 21:20
- 浏览 1117
- 评论(2)
- 论坛回复 / 浏览 (2 / 1367)
- 查看更多
相关推荐
基于JQuery框架的AJAX实例代码 $.ajax $.post $.get 三种方式传递参数
"基于jquery的Ajax后台模板框架,只模拟出了一部分的操作,实现了Ajax操作,提供了一种实现Ajax后台管理操作的方法,更多的功能还需要自己去挖掘,仅供参考。
该实例为本人项目中使用的模块代码,经过专业测试人员测试,兼容所有主流浏览器,如有不解之处请联系本人
基于Jquery网站框架,对ajax技术一个更好的框架体现
JSP+AJAX华丽界面聊天室,AJAX技术所用的是jQuery框架,运行前需要配置好你的JSP服务器,功能不算多,只实现了无刷新发送消息功能,帮助JSP新手更好的理解AJAX的使用。
DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级 DWZ框架支持用html扩展的方式来代替...
后端使用的是SSH框架,前端使用的jQuery以及ajax,数据库使用的MySQL数据库,同时页面使用的是jsp技术,实现了系统的完整的功能,包含最基本的增删改查的操作。
然而他没有使用JS框架,对于我这种JS白痴来说,想要把他的这个例子加到我的网站中就象登天那么难。看他的代码异常复杂,估计他过几天连自己的也看不懂了>_< 这就是为什么我要写这篇文章的原因,是想给大家提供一个...
/*使用方法* ...; height:30px; margin:auto;"><span><input type="text" id=... ajaxType:1 // 0:1 0:表示 使用source数据 1:表示使用通过ajaxUrl返回json兑现数据 返回参数为:similarHtml }); }); */
针对当前热门的无刷新技术问题,引入全新的 jQuery 框架,构建起一套有别于繁琐的 Ajax 实现无刷新技术的新方法与模型,以实现快速便捷开发与更优化的用户体验。
完整可运行的用jquery开发的ajax各种实例包括(级联菜单,谷歌式搜索提示,可编辑表格页面无刷新切换等)
框架:html + css + jquery + ajax + asp.net + webform + ashx + WangEditor富文本框 + 文章二维码生成推广 + sql server + 存储过程 ALTER DATABASE SystemArticle SET SINGLE_USER WITH ROLLBACK IMMEDIATE; ALTER...
JQuery是一个优秀的可跨浏览器的JavaScript框架, 它强化HTML与JavaScript之间的操作, 同时又...本文阐述JQuery框架的概念和原理, 通过JavaWeb应用程序中查询组件的实例, 解析该框 架在软件开发中的应用过程及其特性。
项目概述:本项目是基于Python中流行的Django框架,结合jQuery AJAX技术实现的前后端交互应用。通过使用POST和GET请求,实现了数据的异步处理。项目主要采用Python语言编写,同时包含了JavaScript、HTML、Shell、CSS...
框架:html + css + jquery + ajax + asp.net + webform + ashx + WangEditor富文本框 + 文章二维码生成推广 + sql server + 存储过程 ALTER DATABASE SystemArticle SET SINGLE_USER WITH ROLLBACK IMMEDIATE; ALTER...
---------------------------------------------------------------------------- 描述: 本 WebIM 系统采用 B/S 模式,使用浏览器 ajax 实现即时...客户端使用 AJAX 心跳包拉数据,应用 JQuery 框架实现页面效果;
HtmlBox是一个基于jQuery开发的HTML/XHTML编辑器。易于使用。支持多种浏览器Mozilla Firefox、Internet Explorer6.0、Opera、Safari和Netscape。非常小只有15kb。HtmlBox默认返回HTML,但也可以输出XHTML。 集成Ajax...