jQuery使用初试日记-快速使用AJAX

在之前做过的ZBLOG插件里, [发布ZBLOG新插件:[文章链接助手],ZBLOG原创博主必备],就用到了jQuery来做AJAX查询,从此被jQuery强大的功能所迷 [用JQ做AJAX,真他妈的简单方便],现在,我在工作中,能用jQuery的,都打算用它来做,这不,这几天决定做一个JSP下的[MYSQL命令运行器]来玩,其中就大部分使用AJAX,当然,这此,我没走弯路,直接使用了jQuery来做,真的很方便 ,很轻松.

[MYSQL命令运行器],就是我上篇文章里提到的DEDECMS里那个功能[给网站系统加上SQL运行器],这里也发个效果图,其实,外观是和DEDE的那个很相似的~~~以后可能要升级这个工具,界面上肯定要增加东西的~~~~

这个工具暂时不放出来大家试用,因为,太强了,可以运行大部分SQL命令,如果你是黑客~~~~那,我的服务器就危险了,嘿嘿.

整个程序是HTML+DIV+CSS+AJAX(jQuery)+servlet做的,没有JSP页面,显示的内容,以及所有操作都是通过AJAX来做的. HTML网页代码不到50行, AJAX代码3行. servlet代码长度就不好统计了~~~我今天的目标,就是为了介绍一下在这个程序里使用jQuery,真的很爽,很轻松.来看看今天的全部javascript吧(里面加说明了):

$(document).ready(function(){    //网页加载完成后,才进行各种操作,所以,JS代码都放在这里(我自己的发现,不知道是不是原本就应该这样做)

    $("#table_info").load(window.location.href+"../servlet/GetBFTables");
//网页加载完成后,直接加载显示当前数据库里的所有表,在那个[GetBFTables] servlet里,直接查询所有表并输出所有生成HTML代码,   $("#table_info").load==>表示ID为table_info的那个列表框[load(URL)]方法表示载入URL网页内容到当前元素里

    $("#TB_info").click(function(){ $.post(window.location.href + "../servlet/GetBFCols",{table_name:$("#table_info").val()}, function(data) {$("#sqlcmd_run_info_show").html(data)});});
//网页加载完成后,点击(click)了ID为TB_info时进行查询在列表里选择的表的表结构,并在ID为table_info的DIV里显示,function()就是jQuery里的post方法:==>$.post(URL,{参数1:参数值1,参数2:参数值 2........},function(data){})==>说明一下,参数这里,我是这样写的,{table_name:$ ("#table_info").val()},[table_name]为URL参数名,$("#table_info").val()表示ID为 table_info 的value,
$("#sqlcmd_run_info_show").html(data)}); ==>表示ID为sqlcmd_run_info_show载入HTML内容data.   data就是AJAX返回的内容

    $("#runsql").click( function(){$.post(window.location.href + "../servlet/RunMysqlCMD", {sqlquery:$("#sqlquery").val()}, function(data) {$("#sqlcmd_run_info_show").html(data)});});
//这个和上面这个相似,就不多说了
});

[CODE=javascript] $(document).ready(function(){ $("#table_info").load( window.location.href+"../servlet/GetBFTables"); $("#TB_info").click(function() {$.post(window.location.href + "../servlet/GetBFCols", {table_name:$("#table_info").val()}, function(data) {$("#sqlcmd_run_info_show").html(data)}); }); $("#runsql").click(function() {$.post(window.location.href + "../servlet/RunMysqlCMD", {sqlquery:$("#sqlquery").val()}, function(data) { $("#sqlcmd_run_info_show").html(data)});}); }); [/CODE]

看好了吧,总共就三行JS代码,就完成了那个三个AJAX功能,jQuery实在太方便太强大了

Tags: jQuery ajax busfly项目开发 javascript Zblog

原创文章如转载，请注明：转载自：巴士飞扬-技术BLOG : http://www.busfly.cn/

本文链接地址：http://www.busfly.cn/post/jQuery-log-ajax.html

如果你喜欢本文，请顶一下，支持我，你的支持是我继续发好文章的最大动力。谢谢。
好东西需要分享，快把本文发给你的朋友吧~!~