jQuery下Ajax的使用

最新推荐文章于 2023-04-13 23:04:08 发布

罗里巴所

最新推荐文章于 2023-04-13 23:04:08 发布

阅读量136

点赞数

文章标签： ajax jquery

本文链接：https://blog.csdn.net/bcsdhbiubfcas/article/details/113061914

版权

本文介绍了Ajax的基本概念，包括其与传统请求的区别，强调了其异步更新页面的优势。文章详细阐述了Ajax的编程思路，分为三步：编写Controller、发送Ajax请求和绑定事件。并列举了jQuery中$.ajax、$.get、$.getJSON和$.post四种常见的Ajax方法，展示了如何设置请求类型、URL、数据和回调函数。这些方法简化了Ajax的使用，提高了开发效率。

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

Ajax学习总结

一、Ajax的简介

1.异步请求和传统请求

传统请求： 基于form表单，超链接，地址栏，location.href 等发起请求。
特点： 请求之后整张页面刷新。
缺点： 由于刷新了整张页面导致用户操作被中断从而影响用户体验，整张页面资源需要重新下载造成网络流量的极大浪费。
异步请求： 基于ajax发起的都叫异步请求。
特点： 请求之后页面不动，响应回来刷新局部页面。

2.Ajax简介

Ajax全称“Asynchronous JavaScript And XML”，是指一种创建交互式、快速动态网页应用的技术，无需重新加载就能更新部分网页技术。Ajax不是一门新的编程语言，而是一种通过异步实现网页的局部更新技术。

二、Ajax编程思路及使用

Ajax分为三步：
1、编写对应处理的Controller,返回消息或者字符串或者json格式的数据。

2、编写ajax的请求：

url: Controller请求
data：键值对
success：回调函数

3、给ajax绑定事件，点击click,失去焦点onblur，键盘弹起keyup。

使用jQuery对ajax进行封装
（1）$.ajax();

$.ajax({
	type: "GET|POST",//GET发起GET请求，POST发起POST请求
	url: "请求后台路径",//请求路径
	data: {}|"", //{username:"zhangsan", age:23}|"username=zhangsan&age=23"
	success: function(result){
		result;//就是当前返回的响应结果
		//如果请求的url对应返回的是一个json格式数据，jQuery自动将json转换为js对象
		//如果请求的url对应返回的是一个普通格式的字符串，jQuery返回的就是字符串本身
	}
});

（2）$.get();

$.get(url,[data],[callback],[datatype])
	url: 请求路径
	data: 请求参数，可有可无
	callback: 响应回来回调函数，可有可无function(result){result}
	dataType: 定义服务器返回格式 "JSON" = application/json

（3）$.getJSON();

$.getJSON(url,[data],[callback])
	url: 请求路径
	data: 请求参数，可有可无
	callback: 响应回来回调函数，可有可无function(result){result}

（4）$.post();

$.post(url,[data],[callback],[datatype])
	url: 请求路径
	data: 请求参数，可有可无
	callback: 响应回来回调函数，可有可无function(result){result}
	dataType: 定义服务器返回格式 "JSON" = application/json