Ajax核心知识(2)
对于Ajax核心的东西需要在进行总结提炼一下:
xmlHttp对象。
方法:xml.responseText获取后台传递到前台的数据,经常性的使用var object=xml.responseText;
前端:
二级联动的例子:
function onloadInfo(){
var shengId=document.getElementById("sheng").value;
shi.options.length=0;//清除市的下拉框内容!
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp=new XMLHttpRequest();
}else{
xmlHttp=new ActiveXObject( "Microsoft.XMLHTTP ");
}
alert("readState状态:"+xmlHttp.readyState+";status状态:"+xmlHttp.status);
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
alert(xmlHttp.responseText);
var object=eval("("+xmlHttp.responseText+")");
for(var i=0;i<object.rows.length;i++){
var o=object.rows[i];
shi.options.add(new Option(o.text,o.id));
}
}
};
xmlHttp.open("get","checkUserName?action=ejld&shengId="+shengId,true);
xmlHttp.send();
}
</script>
<body>
<div>
省:<select id="sheng" onchange="onloadInfo()">
<option value="1">山东省</option>
<option value="2">江苏省</option>
<option value="3">宁夏回族自治区</option>
</select>
市:<select id="shi">
</select>
</div>
</body>
</html>
后台:
private void ejld(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/Html;charset=utf-8");
PrintWriter out=response.getWriter();
JSONObject resultJson=new JSONObject();
String shengId=request.getParameter("shengId");
JSONArray Jsonarray=new JSONArray();
JSONObject temp=null;
switch(Integer.parseInt(shengId)){
case 1:{
temp=new JSONObject();temp.put("id", 1);temp.put("text", "济南市");Jsonarray.add(temp);
temp=new JSONObject();temp.put("id", 2);temp.put("text", "潍坊市");Jsonarray.add(temp);
temp=new JSONObject();temp.put("id", 3);temp.put("text", "青岛市");Jsonarray.add(temp);
break;
}
case 2:{
temp=new JSONObject();temp.put("id", 4);temp.put("text", "南通市");Jsonarray.add(temp);
temp=new JSONObject();temp.put("id", 5);temp.put("text", "苏州市");Jsonarray.add(temp);
temp=new JSONObject();temp.put("id", 6);temp.put("text", "泰兴市");Jsonarray.add(temp);
break;
}
case 3:{
temp=new JSONObject();temp.put("id", 7);temp.put("text", "银川市");Jsonarray.add(temp);
temp=new JSONObject();temp.put("id", 8);temp.put("text", "吴忠市");Jsonarray.add(temp);
temp=new JSONObject();temp.put("id", 9);temp.put("text", "中卫市");Jsonarray.add(temp);
break;
}
}
resultJson.put("rows", Jsonarray);
out.println(resultJson);
out.flush();
out.close();
}
其中:
对于JSONObject resultJson=new JSONObject();
我们是一个大的对象
里面有一个数组:
JSONArray jsonArray=new JSONArray();
然后还可以继续往里面加对象。
这里面的对象可以有自己的key-value值!
这很有意思!
Ajax核心知识(2)的更多相关文章
- Ajax核心知识(1)
XMLHttpRequest对象创建 所有现代浏览器均支持XMLHttpRequest对象( IE5 和 IE6 使用 ActiveXObject). XMLHttpRequest用于在后台与服务器交 ...
- 对学习Ajax的知识总结
1.对Ajax的初步认识 1.1. Ajax 是一种网页开发技术,(Asynchronous Javascript + XML)异步 JavaScript 和 XML: 1.2.Ajax 是异步交互, ...
- 网络基础知识、ASP.NET 核心知识(1)*
为什么要写网络? 我原本的计划是这样的,连续两天梳理ASP.NET开发的核心知识.说到这呢,有人问了.“不是说好了做ASP.NET笔记吗?为啥要写网络基础知识?是不是傻?” 原因是这样的.作为网站开发 ...
- AJAX重点知识的心得体会
下面就为大家带来一篇 AJAX重点知识的心得体会.学习还是有点帮助的,给大家做个参考吧. AJAX是什么? 是Asynchronous Javascript And XML的首字母的缩写, 它不是一门 ...
- Ajax基础知识 浅析(含php基础语法知识)
1.php基础语法 后缀名为.php的文件 (1) echo 向页面中输入字符串 <?php 所有php相关代码都要写在<?php ?>这个标签之中 echo &q ...
- Ajax基础知识《一》
对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...
- ASP.NET Ajax核心对象
本章学习目标 主要掌握AJAX的基本概念和实现机制,学习并创建XMLHttpRequest对象,使用XMLHttpRequestObject对象获取服务器端的数据 主要内容如下,请点击ASP.NET ...
- Ajax基础知识(二)
接上一篇 Ajax基础知识(一) 在上一篇博客里,抛弃了VS中新建aspx页面,拖个button写上C#代码的方式.使用ajax的方式,异步向服务器请求数据.我们让服务器只简单的返回一个" ...
- Vuex核心知识(2.0)
Vuex 是一个专门为 Vue.js 应该程序开发的状态管理模式,它类似于 Redux 应用于 React 项目中,他们都是一种 Flux 架构.相比 Redux,Vuex 更简洁,学习成本更低.希望 ...
随机推荐
- DOM,javascript,Web API之间的关系——onclick 引起的思考与调研
平时习惯了用js操作dom树来与html页面进行交互,基本都是通过web API接口实现的,最近看闭包和原生js的知识点比较多,昨天无意中看到了onclick中的this指向问题,遂用native j ...
- Android 使用EventBus进行Fragment和Activity通信
本文介绍EventBus的基本使用,以及用于Fragment和Activity之间通信. github地址: https://github.com/greenrobot/EventBus 版本是 Ev ...
- iOS Programming View and View Hierarchy 视图和视图等级
iOS Programming View and View Hierarchy 视图和视图等级 1.1(1)File → New → Project.. From the iOS section, ...
- Asp.Net 设计模式 之 “工厂方法”即利用 接口 实现的抽象工厂
主要改动部分: /// <summary> /// 6.创建工厂方法模式(抽象工厂:接口) /// </summary> interface IFactory ...
- docker 容器挂载主机目录,访问出现 cannot open directory /mnt/home/webroot/: Permission denied 的解决办法
问题原因及解决办法 原因是CentOS7中的安全模块selinux把权限禁掉了,至少有以下三种方式解决挂载的目录没有权限的问题: 1.在运行容器的时候,给容器加特权,及加上 --privileged= ...
- 边框带阴影 box-shadow
.chosen-container-active .chosen-single { border: 1px solid #5897fb; -webkit-box-shadow: 0 0 5px rgb ...
- Vue打包之后部署到 express 服务器上
Part.1 安装 express npm install express body-parer --save Part.2 在项目根目录下创建 app.js 文件作为启动 express 服务器代码 ...
- SqlServer数据库练习20190211
一条update语句,修改多个条件 update orderdt_jimmy set qty = (case else qty end); 好了,就这样
- Oracle learning note
oracle SQL select 'para1' || 'para2' as "para" must "" from table t where c.name ...
- layui timeline使用
使用layui timeline过程记录: layui官网时间线介绍比较少,可能是太简单了,这里把时间线通过请求后台数据.再自动填写到对应区块,进行了封装: 代码如下: function timeli ...