三 jquery的ajax操作
3.1传统方式实现Ajax的不足
步骤繁琐
方法、属性、常用值较多不好记忆
3.2 ajax()方法
可以通过发送 HTTP请求加载远程数据，是 jQuery 最底层的 Ajax 实现，具有较高灵活性。
$.ajax( [settings] ); //参数 settings 是$.ajax ( )方法的参数列表，用于配置 Ajax 请求的键值对集合;
$.ajax({
url:请求地址
type:"get | post | put | delete " 默认是get,
data:请求参数 {"id":"123","pwd":"123456"},
dataType:请求数据类型"html | text | json | xml | script | jsonp success:function(data,dataTextStatus,jqxhr){ },//请求成功时
error:function(jqxhr,textStatus,error)//请求失败时
})
3.3 get() 方法通过远程 HTTP GET 请求载入信息。
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。
$.get(url,data,function(result) {
//省略将服务器返回的数据显示到页面的代码
});
url:请求的路径
data:发送的数据 success:成功函数 datatype 返回的数据
3.4 post() 方法通过远程 HTTP GET 请求载入信息。
$.post(url,data,function(result) {
//省略将服务器返回的数据显示到页面的代码
});
url:请求的路径 t
data:发送的数据 success:成功函数 datatype 返回的数据
四 JSON
4.1、什么是JSON
JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式。 易于人阅读和编写。同时也易于机 器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族 的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。 这些特性使JSON成为理想的数据交换语 言。
4.2、JSON对象定义和基本使用
在标准的json格式中，json对象由在括号括起来，对象中的属性也就是json的key是一个字符串，所以一 定要使用双引号引起来。每组key之间使用逗号进行分隔。
4.2.1、JSON的定义
Json定义格式：
var 变量名 = {
“key” : value , // Number类型
“key2” : “value” , // 字符串类型t
“key3” : [] , // 数组类型
“key4” : {}, // json 对象类型
“key5” : [{},{}] // json 数组
};
4.2.2、JSON对象的访问
json对象，顾名思义，就知道它是一个对象。里面的key就是对象的属性。我们要访问一个对象的属性， 只需要使用【对象名.属性名】的方式访问即可。
<script type="text/javascript">
// json的定义
var jsons = {
"key1":"abc", // 字符串类型
"key2":1234, // Number
"key3":[1234,"21341","53"], // 数组
"key4":{
"key4 1" : 12,
"key4 2" : "kkk"
},
"key5":[{
"key5 1 1" : 12,
"key5 1 2" : "abc"
},{
"key5 2 1" : 41,
"key5 2 2" : "bbj"
}]
};
// 访问json的属性
alert(jsons.key1); // "abc"
// 访问json的数组属性
alert(jsons.key3[1]); // "21341"
// 访问json的json属性
alert(jsons.key4.key4 1);//12
// 访问json的json数组
alert(jsons.key5[0].key5 1 2);//"abc"
</script>
4.3、JSON在java中的使用(重要)
我们要使用json和java中使用，我们需要使用到一个第三方的包。它就是
java对象和json之间的转换
《1》单个对象或map集合
java->json：
Users user2=new Users(); user2.setUsername("李四"); user2.setPassword("abc"); user2.setAge(20);
JSONObject obj=JSONObject.fromObject(user);//obj就是json格式的
json->java：
String str="{'username':'李四','password':'admin','age':19}"; JSONObject json=JSONObject.fromObject(str);
Users user=(Users)JSONObject.toBean(json,Users.class);
《2》对象集合和json的转换 java集合->json数组:
List list=new ArrayList(); list.add("dd");
list.add("aa");
JSONArray obj=JSONArray.fromObject(list);//set也是这么转
json数组->java集合: 方式1:
String str2="[{'age':20,'password':'abc','username':'李四'},
{'age':10,'password':'adb','username':'张三'}]";
JSONArray json2=JSONArray.fromObject(str2);
Object[] obj=(Object[])JSONArray.toArray(json2,Users.class);
方式2:
String str3="[{'age':20,'password':'abc','username':'李四'},
{'age':10,'password':'adb','username':'展示干'}]";
JSONArray json3=JSONArray.fromObject(str3);
//默认转换成ArrayList
List<Users> list=(List<Users>) JSONArray.toCollection(json3,Users.class);
ajax实例2-实现数据的自动填充： 页面:
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$("[name='uid']").blur(function(){
var uid=$(this).val();
$.ajax({
url:"getuser",
data:"userid="+uid, type:"post",
dataType:"JSON",//设置服务器端响应回来的格式
success:function(rs){
//alert(rs.username);
$("[name='uname']").val(rs.username);
$("[name='address']").val(rs.address);
if(rs.sex=='男'){
$("#boy")[0].checked=true;
}else{
$("#girl")[0].checked=true;
}
}
});
});
})
</script>
</head>
<body>
userid:<input type="text" name="uid"><br>
username <input type="text" id="uname" name="uname"><br>
address <input type="text" id="address" name="address"><br> sex:<input type="radio" name="sex" id="boy">男
<input type="radio" name="sex" id="girl">女
</body>
后台:
实体类
public class Users {
private String username; private String password; private String address; private String sex;
}
处理类:
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws
ServletException, IOException {
String userid=req.getParameter("userid");
Users users=new Users();
switch (Integer.parseInt(userid)){
case 1:
users.setUsername("张安");
users.setAddress("北京"); users.setSex("男");
break;
case 2:
users.setUsername("张安1");
users.setAddress("北京2"); users.setSex("女");
break;
case 3:
users.setUsername("张安3");
users.setAddress("北京3"); users.setSex("男");
break;
default:
users.setUsername(""); users.setAddress(""); users.setSex("");
}
//将users对象响应给客户端，使用PrintWriter来实现
resp.setContentType("text/html;charset=utf-8"); PrintWriter writer = resp.getWriter();
//将对象转换成json格式
JSONObject jsonObject = JSONObject.fromObject(users); writer.print(jsonObject);
}
扫一扫
1043
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
