目录
1. 定义
AJAX：异步的JavaScript和xml，并不是新的编程，指的是一种交互方式，异步加载，客户端和服务器的数据交互更新在局部页面的技术，不需要刷新整个页面（局部刷新）
1.1 优点
- 局部刷新，效果更好
- 用户体验更好
2. 基于jQuery的AJAX
2.1 语法
$.ajax({
属性})
常用的属性参数:
- url:请求的后端服务地址
- type：请求类型，默认get
- data：请求参数
- dataType：服务器返回的数据类型，text/json
- success：请求成功的回调函数
- error：请求失败的回调函数
- complete：请求完成的回调函数（无论成功或者失败，都会回调）
2.2 JSON
一种轻量级数据交互格式，完成js和java等后端开发语言对象数据之间的转换
客户端和服务器之间传递对象数据，需要用JSON格式
var user = {
id:1,
name:"张三",
score:96.5
}
相当于java中的
package entity;
public class User {
private Integer id;
private String name;
private Double score;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Double getScore() {
return score;
}
public void setScore(Double score) {
this.score = score;
}
public User(Integer id, String name, Double score) {
super();
this.id = id;
this.name = name;
this.score = score;
}
}
User user = new User(1,"张三",96.5);
将java对象转为json格式
User user = new User(1,"张三",96.0);
//将java对象转为json格式
resp.setCharacterEncoding("utf-8");
JSONObject jsonObject = JSONObject.fromObject(user);
resp.getWriter().write(jsonObject.toString());
2.3 案例
jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type = "text/javascript" src = "js/jquery-3.0.0.min.js"></script>
<script type="text/javascript">
/* $(function(){
alert(123)
}) */
$(function(){
var btn = $("#btn");
btn.click(function(){
//alert("点击了按钮")
$.ajax({
//相当于<form action="">
url:'testservlet',
type:'get',
data:'id=1',
dataType:'text',
success:function(data){
//alert(data)
var text = $("#text");
text.before("<span>"+data+"</span><br>");
}
});
});
})
</script
最低0.47元/天 解锁文章
39
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
