00:00
好,演示一个啊。我们就把我们之前那个程序呢,改造一下,我们打开呢,我们的idea。Was the idea。稍等一下啊,我们改造一下就行了。好项目打开之后呢,我们来看一下。呃,我们看在哪呢,嗯。我们就改这个吧,就改这个query info项目吧,在这个项目中呢,我们之前呢,在我们的页面中呢。大家看啊,我们这里边。这是做了一个一步对象的阿贾克的请求吧,那我把这个请求呢,改成用这query中的Dollar阿贾克斯令函数去做。
01:01
相当于就是把这个一步对象的请求处理呢升级了,让它变得简单一点,方便一些。那怎么做呢?首先第一步你需要把我们这个j query的这个文件得加到你的项目中吧,所以第一步来加这个j query的文件。我们在web目录之下。新建一个目录,这个目录呢,我们叫做JS,目录名是自定义的,只不过习惯上叫JS。我们把这个文件呢,CTRLC一下。把它复制到你的idea的JS目录之下。不打开它。粘上就行了,就在这这加完之后呢,你最好是把你的项目能刷新一下。我们看看这儿提没提供这个刷新的按钮啊。这是一个新版本的,这儿呢,暂时还没有这个刷新的按钮啊。
02:00
等于F5,试一试。没有这个拷贝啊,这是增加进来的,为什么这么说呢?因为呢,你这个文件是后增加的,是后增加的啊,有可能呢,你的idea不能够立刻识别出新增加这个文件。以前的版本中这是有一个刷新按钮的啊,这个版本中现在呢,没在这儿。就是加上这个文件。那原先这个MYR点的JSP呢,那这个文件呢,我就不动它了,我新建一个页面啊,CTRLCCTRLV。好,这个呢,我叫做。Query。阿贾克斯。打开这个页面。既然我要用到了j query,那第一步操作应该是指定j query库文件的位置,指定我们的script,然后have have加S,然后我们指定的是。
03:02
JS这个目录下的这块的这个文件,一定要注意我们语法格式,这是开始,这是结束,标签必须这么写。好,接着往下来。稍等一下,我这有点卡。那里边儿的这些代表实际上就都不需要了,这都不需要了啊,这都不需要了,那么我们一点点改造吧。好,那我们这一块呢,这样做。啊,这些都不要了啊。程序中呢,我们是说大家看是要给这个按钮呢。做一个单机事件。我呢也不用这个内容了,都不要了,给他一个ID。比如说我们叫做BTN啊BTN。给他绑定一个事件,那我往上来。
04:01
指定到了action入口函数。然后我们来指定。Dollar井号BTN绑定一个事件是click。指定事件的处理函数是function好。现在呢,我们要发起阿贾克斯请求,那第一步我们要做的是获取这个参数啊。ID是proid,获取它的值,那我们就可以这么做了。获取到的微流值,那我们怎么做到了井号平遥ID呀,然后点va呀。这不就获取值吗?位值,然后发起阿贾克斯请求,用刚才介绍的函数到点阿贾克斯括号里边是一个J森结构,这是个花括号第一个请求的地址。
05:12
那地址的话,你看我们之前的这个地址是叫做corry Jason。拿过来。接着请求方式我们可以指定是。Get这句话你写也行,不写也行,你more就是get,不写了,去掉它吧,不写了。再往下看这个地址,这里是不是有一个参数叫做proid呀,好,拿到这个参数。决定参数,那是什么呢?Date Json的格式参数名叫P,值呢,是上面定义的这个变量PID。就传值了吗?数据格式就是Jason date k maha Jason数据格式,数据获取到之后要执行一个success,它是个函数,Function,有一个型材。
06:11
这个行参名是你自定义的,我不喜欢叫date,那我叫Rep没问题。然后我们alert把这个数据呢打印到屏幕上,RT。这个请求工作就完成了。下面这个代码就不需要了啊,不需要了。我把这些呢都删掉。不要了,干掉。这些都不要,现在呢,我们的阿贾克斯请求就缩减成了。好。就这样几行就完事了,就这么几行就能够向这个地址。发请求,写掉了这个参数,然后我们希望的是Jason数据,这时候你的j query它会把拿到的数据。
07:05
转成JN,然后付给这个resp,那么它就是处理后的一个数据了,是个JN格式的,好,我们看看效果吧。这个项目呢,我们看一下啊。我稍微调整一下。稍等一下啊,我这有点卡不那么快。找到我们的artifact。Her info把它干掉。然后重新加载一下。Carry英好。应用一下,然后OK。把项目呢发布起来。我试一下,看看它能不能正常的启动。就是访问地址。
08:00
好,我们把这个清空。HTTP8080。Info,那现在要访问呢,应该是这个页面。也就是我们新增加的这个页面呢,是叫做j query阿贾克斯点JSP。它应该是j query,阿贾克斯加JP,哦,这是JSP啊,访问它,然后一个编号1F12,打开我们的调试窗口。现在点击搜索,然后点搜索有问题。看控制台有报错吗?有说什么呢?Dollar是没有定义的,这个刚才我所说的就是什么呢?我们现在呢,加载这个文件找不到。就因为呢,我们是后增加的这个文件,所以idea有些时候啊,他不知道有这么一个文件找不到它。
09:01
那解决方式呢?你们用的版本如果是idea是1.3.1的话,这块是有刷加按钮的,你可以刷新一下,那如果还不行的话呢,我去看一看,我这个项目现在就是调试一下了,调试一下我的项目。它应该是在这个目录的下面,我看一下啊在哪。在这。Query info。他应该有一个。找到啊,它应该有个输出的目录,我看一下输出在哪。他应该有一个out。好,那我们这块啊,已经成功访问了,访问之后呢,我们获取了这个数据,它是一个Jason对象,那么把它更新一下。我们看下面这块有pro name。放在这,然后呢,它的Val给参数啊,rp.name。
10:03
试一下。刷新一下更新资源。然后浏览器这刷新一下。写一个一,然后搜索,哎,你看数据加上去了,说明没问题,那再往下来。啊减Dollar井号,后面这呢,还有是简称。简称。这套赋值VP点简称,你看idea很智能,它能检测出来,再往下来还是省会,叫pro省会。减号省会点VLB点省会。省会好了,这样就更新完成了。然后最后测试一下。
11:02
一好,没问题,你看河北石家庄,二呢,应该是我们的山西山西晋和太原市,那相比之前的一步请求处理方式,那你看这种方式是不是更简洁更方便呢?你只需要简单的这样的几个设置,就能完成我们之前的大段代码的一步请求,这就是阿贾克斯的一种实现方式。用这块中的这个函数,用它来实现阿贾克斯请求的处理工作,那我们刚才主要改的是这这里呢,我们刚才呢,是因为用的是I键中的一个快捷的提示,它默认前面这有个斜杠,这个斜杠不对,删掉它就可以了。下面这是调用的这块的函数导入了阿贾克斯访问地址请求参数数据格式。希望的是杰森。Success是说当请求成功之后会执行的函数。
12:04
Rep是你的服务器端返回的数据,它现在是一个Json格式。通过点name来获取内部的属性值。更新我们的盗墓对象,这是到阿贾克斯函数的一个事例。其他函数呢,还有两个,明天我们再说。好,今天呢,我们就讲这么多就可以了。
我来说两句