JavaWeb——AJAX(附三级联动省、市、区案例)

目录

  • 1. 定义
  • 1.1 优点
  • 2. 基于jQuery的AJAX
    • 2.1 语法
    • 2.2 JSON
    • 2.3 案例
  • 3. 传统的WEB数据交互 VS AJAX数据交互
  • 4. AJAX原理
  • 5. 三级联动案例
    • 5.1 案例说明
    • 5.2 代码

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 heretitle>
<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({
     
				//相当于
url:'testservlet', type:'get', data:'id=1', dataType:'text', success:function(data){ //alert(data) var text = $("#text"); text.before(""+data+"
"
); } }); }); }) script> head> <body> <input id = text type

你可能感兴趣的:(JavaWeb,java,ajax,javascript,java,web)