0


解锁网页动态交互:AJAX技术全解析(下)

jqueryajax操作

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|jsonpsuccess: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(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLanguage,StandardECMA-2623rdEdition-December1999的一个子集。JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C,C++,C#,Java,JavaScript,Perl,Python等)。这些特性使JSON成为理想的数据交换语言。

4.2JSON****对象定义和基本使用

在标准的json格式中,json对象由在括号括起来,对象中的属性也就是json的key是一个字符串,所以一定要使用双引号引起来。每组key之间使用逗号进行分隔。

4.2.1JSON****的定义

Json定义格式:

var变量名={

“key”:value, //Number类型
“key2”:“value”, //字符串类型t
“key3”:[], //数组类型
“key4”:{}, //json对象类型
“key5”:[{},{}] //json数组
};

4.2.2JSON****对象的访问

json对象,顾名思义,就知道它是一个对象。里面的key就是对象的属性。我们要访问一个对象的属性,只需要使用【对象名.属性名】的方式访问即可。

<scripttype="text/javascript">

//json的定义

varjsons={

"key1":"abc",//字符串类型

"key2":1234,//Number

"key3":[1234,"21341","53"],//数组

"key4":{

"key41":12,

"key42":"kkk"

},

"key5":[{

"key511":12,

"key512":"abc"

},{

"key521":41,

"key522":"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].key512);//"abc"

</script>

4.3JSONjava**中的使用(重要)**

我们要使用json和java中使用,我们需要使用到一个第三方的包。它就是

java对象和json之间的转换
《1》单个对象或map集合

java->json:

Usersuser2=newUsers();user2.setUsername("李四");user2.setPassword("abc");user2.setAge(20);

JSONObjectobj=JSONObject.fromObject(user);//obj就是json格式的

json->java:

Stringstr="{'username':'李四','password':'admin','age':19}";JSONObjectjson=JSONObject.fromObject(str);

Usersuser=(Users)JSONObject.toBean(json,Users.class);

《2》对象集合和json的转换java集合->json数组:

Listlist=newArrayList();list.add("dd");
list.add("aa");

JSONArrayobj=JSONArray.fromObject(list);//set也是这么转

json数组->java集合:方式1:

Stringstr2="[{'age':20,'password':'abc','username':'李四'},
{'age':10,'password':'adb','username':'张三'}]";

JSONArrayjson2=JSONArray.fromObject(str2);

Object[]obj=(Object[])JSONArray.toArray(json2,Users.class);

方式2:

Stringstr3="[{'age':20,'password':'abc','username':'李四'},
{'age':10,'password':'adb','username':'展示干'}]";

JSONArrayjson3=JSONArray.fromObject(str3);
//默认转换成ArrayList

List<Users>list=(List<Users>)JSONArray.toCollection(json3,Users.class);

ajax实例2-实现数据的自动填充:页面:

<scripttype="text/javascript"src="js/jquery-1.8.3.min.js"></script>

<script> $(function(){ $("[name='uid']").blur(function(){ varuid=$(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:<inputtype="text"name="uid">

username<inputtype="text"id="uname"name="uname">

address<inputtype="text"id="address"name="address">
sex:<inputtype="radio"name="sex"id="boy">男

<inputtype="radio"name="sex"id="girl">女

</body>

后台:

实体类

publicclassUsers{
privateStringusername;privateStringpassword;privateStringaddress;privateStringsex;

}

处理类:

protectedvoiddoPost(HttpServletRequestreq,HttpServletResponseresp)throws

ServletException,IOException{

Stringuserid=req.getParameter("userid");

Usersusers=newUsers();

switch(Integer.parseInt(userid)){

case1:
users.setUsername("张安");

users.setAddress("北京");users.setSex("男");
break;

case2:
users.setUsername("张安1");

users.setAddress("北京2");users.setSex("女");
break;

case3:
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");PrintWriterwriter=resp.getWriter();

//将对象转换成json格式

JSONObjectjsonObject=JSONObject.fromObject(users);writer.print(jsonObject);

}

标签: 交互 ajax okhttp

本文转载自: https://blog.csdn.net/liyaxin11/article/details/142336817
版权归原作者 空巢青年% 所有, 如有侵权,请联系我们删除。

“解锁网页动态交互:AJAX技术全解析(下)”的评论:

还没有评论