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

weixin_43820008

于 2022-02-05 22:27:04 发布

阅读量1.3k

点赞数 1

分类专栏： JavaWeb java 文章标签： ajax javascript java web

本文链接：https://blog.csdn.net/weixin_43820008/article/details/122778658

版权

本文介绍了AJAX的基本定义、优点，详细讲解了基于jQuery的AJAX使用，包括语法、JSON数据交互，并对比了AJAX与传统WEB数据交互的区别。重点在于AJAX的三级联动案例，阐述了如何在选择省时自动更新市、区选项的实现原理及代码示例。

摘要由CSDN通过智能技术生成

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>
</head>
<body>
	<input id = text type