jQuery与Ajax

Posted 2021-04-15 Hacker丶Cat

使用javascript实现Ajax技术来提升用户体验度，jQuery将与Ajax相关的操作都做了封装，常见的Ajax请求有GET请求及POST请求，接下来我们聊聊$.get()方法和$.post()方法

1、$.get()方法

$.get(url[,data][,callBack]);

data:要发送的数据

callBack：执行完Ajax请求后要回调的函数

2、$.post()方法

$.post(url[,data][,callback]);

3、其他方法

$.load(url[,data][,callback])

$.getJSON(url[,data][,callback])

$.getScript(url[,callback])

$.ajax([options])

表1-1常用参数表

参数名称	类型	说明
url	String
Type	String	请求方式（post或get）
Tineout	Number	设置请求超时的时间
Data	Object或String	发送到服务器的数据
dataType	String	预期服务器返回的数据类型，可用类型有xml、html、script、json、jsonp、text
beforeSend	Function	发送请求前执行的函数
Complete	Function	请求完成后调用的回调函数
Success	Function	请求完成后调用的回调函数-成功
Error	Function	请求完成后调用的回调函数-失败
global	Boolean	是否触发全局Ajax

最后分享给大家一个小型管理系统的实现思路

需求：

Ajax登录、点击按钮事件、滑动效果动画

实现思路：

在登录页面实现登录框

在所有页面的head元素中引入jQuery元素

在登录页面使用$.post()方法发送Ajax请求，并处理响应结果

在管理页面中实现添加数据的按钮

使用JQuery选择器选择所要操作的元素对象

使用bind()方法绑定相关的按钮事件

使用val()方法获取表单元素的值

使用slideUp()方法和slideDown()方法实现滑动效果