00:01
来看一下我们刚才写的这个select,我们这个select呢,它的作用啊是获取所有的省份信息,Select写完了,下面呢,来写页面部分,我们去做阿贾克斯的请求,打开这个音带的JP。页面的布局呢已经写完了,下面呢是阿贾克斯。接着拉贾克斯呢,我们用到j query,把这块库文件呢加到当前项目之中。在web这个目录的下面,我们要创建一级目录,我叫做JS,用来存放呢j query的文件。文件呢,我们在。我们找一个啊,这个例子中呢,应该有。CTRLC把它复制过来就行了。做到JS目录的下面。好,这就可以了,这是这块的文件。来了。找到我们这个当前的JJSP的JSP。
01:04
我们要引入这个JJS文件,选择方式是script type呢,Text的javascript s JS目录下的文件j query,好,这样写就可以了,这块呢,不用加斜杠啊,别加斜杠。指定脚本。我们现在呢要做的是这个按钮的单击事件,并load单击之后呢发起阿贾克斯请求。首先来指定绑定事件操作,指定query的入口函数。Dollar fun。绑定事件。它的警察。因为有ID必听loud,用ID选择器就可以了。
02:04
指定事件呢是click事件的处理函数function。在这里我们要做阿贾克斯请求使用j query Dollar。阿贾克斯这个函数就行了。它的使用方式是。好,我们来指定到点它贾克斯,然后它里边呢,是一个J森格式的参数,Json,划括号,第一个URL请求的地址。地址呢,应该是我们配置好的叫query province。啊。酒精的方式呢,我们用get,那这个type呢,就不用写了,因为它默认就是get吗?它可以省略啊,参数也不需要没参数啊,因为我们这个select不需要参数,它拿的是所有没有参数,所以呢也不用参数,数据格式呢,Data type,那我期望要拿的是Jason。
03:14
而我们select呢,它确实访问也是Jason数据。Jason的,所以我们可以指定呢,Data type是Jason,好,接着指定一个success,这是我们的成功函数。指定一个行参,这个名字呢,是你自定义的,自定义的啊,我叫date加IP都行自定义的。这个resp呢,它就代表的是你的。输出的这个内容,它输出是什么,你那个行参Rep就是什么。代表是服务器端访问的数据RESP。那我们先第一步把它打印出来,Rep。
04:04
好。发请求地址,然后指定数据格式,指定成功的方法,最简单的,这样就完事了,这就可以发一个请求了。现在我们来测试一下,看一看我们这个按钮事件呢,能不能够按预期得到我们的数据,把项目呢发布一下。添加一个新的。是这个。名称呢,我们就叫做level阿贾克斯query。好。这是公众号8080,没问题。启动他们。那服再启动。
05:01
稍等一下啊,还没整完呢,把日志呢清除一下来访问我们的。地址。8080我们的应用。好,这是我们的音带的JSP。这个按钮呢,怎么挤在前面了?然后这是省份,请选择好,我们把这个页面呢调整一下。跟我们期望的不太一样啊,我看一下这是省份。然后啊,我把这个input给它放到这个select home放到这。这是一个表格,表格呢,指定一个包的是一吧。空闲呢,是零。空前是零啊。把页面呢更新一下。更新这个resource刷新一下好了。
06:03
这是什么城市?城市这块怎么挤到外面去了?我们看看这是一列。城市啊,这块少写了一个TD。好,这样就对了。再更新一下页面啊,更新一下页面。刷新一下,好,就是这个样子的,这是我们的省份,这是我们的城市,现在呢,我先点击这个law按钮,点它。然后我们看到这就得到了信息了。说明这个请求是成功的,那这里会看到呢,就有好多的object,然后到时分隔的多少分隔的,那这是什么格式数据呢。我们看一下F12。打开我们的火狐的调试窗口。点到网络这一块啊,让网络选中的再点击load。
07:03
我们看这个请求发出去了,首先确定它的处罚原因是XHR。它代表的是一步对象,所以我们这个请求呢是一步的,我们看到数据格式是。Jason的,点击这个链接地址,看右侧的。我们看到这有个响应头叫做J森,说明呢,我们的数据格式呢是J森的。再来看一下我们的响应。响应就代表是服务器端返回的数据,这个数据呢,指的就是你的。So that里边的这个话,Jason这句话啊,它的输出这个内容,Jason就是我们看到的响应的结果,也就是说这个Jason就是这里的。响应的这些数据啊,就这些数据。这是Jason格式的,你会看到零里边是河北G。
08:02
然后呢,一是山西,然后二呢是内蒙古。012345678到这儿。这是Jason格式的,什么格式呢,数组?JN的数组,数组才有下标嘛,0123。45678好,然后你看这是最原始的格式。原始的格式,这有个中括号,看到了吧,中括号啊中括号,中括号呢,它表示是一个数组的意思,在数组里边呢,这是一个Jason对象。这是第二个Json对象,这种格式呢,是一个Json的数组啊数组。啊,把在它放大一,诶这个啊,我要取的是数据。因为是这部啊。
09:00
大一点啊。再一点呢,我们看到这是一个中括号吧,数组格式。这是一个对象。这是一个。这是一个。啊,这是一个。通过这个结果呢,我们能知道我们的服务器端,它把这个粒子的集合。这是一个例子吗?它把这个力的集合转成这个Jason,它是个数组,是这样的一个。里边呢,是多个的Jason对象,它是一个J森的数组,是数组,是数组。我们注意看在这个数组,那数组里边呢,是多个Json对象,对象呢有ID属性,有name属性,有简称的属性。那现在我们已经知道从服务器端拿的数据是数组,Jason的数组,那就意味着我们现在看到的。
10:01
这个阿P。它应该是一个Jason的数组格式的数据,也就是这个数据,我们把它拷贝一行过来吧。放到我们的页面中,这个IP呢,它是这样的一个格式的一个数据。这个数据呢,它是一个数组啊。啊,是个数组数据呢,已经拿到了,那怎么把它加到我们的列表框里边去呢,也说。你的CL里边怎么把数据加进去呢?Select加数据,这得加option子标签,加它就行了,因为它代表是我们的select列表框的数据吗?所以我们要加的是option到对象那,看怎么做。这个输出就不要了。数组我们想到的是循环呢,循环,循环呢我们可以用j query h dollar.h,循环的是rest。
11:10
它就是一个数组,当然可以循环它了,指定一个函数function I,逗号N,因为我们讲过。我们的H是可以循环GN的,循环这个GN数数。I。循环变量N代表成员,那这个N是谁呢?N代表成员,那这是不是一个成员?这个成员就是N,它是一个Json,对象是一个J森的。All。针对象,然后ID name是对象的属性名称。那这样就好办的多了。在这啊。我们要给列表框。
12:02
你给这个select添加子对象,Option添加。首先我获取这个列表框。那么在这我们要获取这个select盗对象,Select这个盗对象我们用的是ID选择器,然后井号parents。我们要给它加造对象用哪个函数啊?把判看函数。这个判它不是说我们可以添加子对象吗?用它你看选择器啊判增加一个div。我现在要加的是一个option点啊,那就追加一个option呗,追加一个哪个内容啊,就是它呗,你追加一个这个。你追加一个它不就有一个子项了吗?追加一个它option。
13:04
那这个option的数据来自于哪里呢?肯定不是固定的呀,来自于哪里?来自于我们这个数组循环的内容啊。Option这个value。没有的话。它的内容应该是来自于n.ID呀。这个ID是我们要用的值。N代表的是这个JC对象代表它吗?那么点ID就是这个属性的值嘛,n.ID是等于零。之后这块是文本。那这个文本这块呢,怎么做呢,我看一下啊。这加一个单引号。这加上双引号,这样的话呢,前面这块呢,是一个完整的一句。再连接上文本,应该是省份的名称,河北。那应该是N点内好,然后再加上后面的这部分。
14:08
还有这一部分。这结束,好,这样就完成了。好好好看一下这个语句啊。我现在加option。V轴的值呢,来自于对象的这个ID。给用户显示的文字呢,是来自于n.name这样的话呢,通过循环的方式,那我就可以不断的向我们这个列表框中去加我们的option,这样内容不就有了吗?嗯,看一下这块啊。w.H循环我们这个JC的数组。N这个N呢是代表数组中的成员的,这是数中一个成员,它这个 JNn.ID是代表的是ID属性,n.name代表的是name属性。
15:05
大家没什么问题啊啊,那挺好的。我们把代码呢更新一下,然后看看效果。刷新一下页面,点击按钮,先把这个清一下。按钮啊。好,这个应该成功了,来看这个数据,诶你看河北山西,内蒙古,辽宁。然后我们点击这个查看器。点那个箭头啊。眼罩。我们看最终结果什么样的,点开之后你看。就是我们期望的这个样子吧。A微流一河北,二是山西。这样不就加进去我们的倒对象了吗?啊,这是结果的内容啊,那现在我们能看到这个数据了,河北,山西,内蒙古,辽宁,江苏等等,这就加进去了。这加进去之后呢,大家看啊,如果再点击漏会发生什么。
16:03
你看他数据是不是又加了一次。你注意看啊,河北这有一个,这有一个。再一次呢?我们看啊,看数据到这儿了,再点一次。哎,你看啊,大家能看到吧,这又多了一次呀。是因为呢,我在这个按钮的事件中做的是添加呀,你看。我们一直做的是什么呢?是这个叫。Upon往里加,大家想我每一次点按钮的时候。我们这个代码是不是只用一次,那就会重复多次向列表框中去添加这个对象。这样造成数据呢,有大量重复,这是不正确的。怎么改正这个问题呢?那就应该是当我在发起请求的时候,应该把旧有的数据是不是给删掉了。就有数据的删掉,所以我们在这要删除。
17:03
删除旧的数据。啊,就是数据啊,已经存在的这个数据啊,清空不要的啊,那怎么清空呢,大家想这个清空操作的话。我们这个加列表框它是不是还要啊,只是里边的这些数据他们是不是要删除掉啊,删除是子把select这个do对象子option把它们干掉,用哪个函数呢。用M压它不是删除这个子对象吗。好,清空子对象做一个清空处理。那么在这我们要用到的是我们这个province对象,它的一个empty就清空了。
18:01
然后我们再来做一下更新处理。更新页面的资源啊。钢筋,然后我看一下效果。开心。点一下,哎,有数据来看啊,再点你看还这几个数据吧,哎,还这几个河北就一个呀,再点再点再点再点。你看手机,哎,这就正确了。好,这就可以了。
我来说两句