jQuery学习
Posted zxfei
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery学习相关的知识，希望对你有一定的参考价值。
Ajax介绍
Ajax本身属于js内核中的一部分，jQuery是js的一个框架，是对js的封装，因此jQuery中也维护着Ajax的内容。
什么是同步，什么是异步？
- 同步现象
客户端发送请求到服务器，当服务器返回响应前，客户端处于等待卡死状态 - 异步现象
客户端发送请求到服务器，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死
Ajax的运行原理
页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提交请求到服务器端，在这段时间里，客户端可以进行任意操作，知道服务器端将数据返回给Ajax引擎后，会触发你设置的事件，从而执行自定义的js逻辑代码完成某种页面功能。
重点
jQuery是一个优秀的js框架，自然对js原生的ajax进行了封装，封装后的Ajax操作方法更简单，功能更强大，与Ajax操作相关的jQuery方法很多种，但开发中常用的有三种：
- $.get(url, [data], [callback], [type]);
- String url：待载入页面的url地址
- Map data（可选）：待发送key/value参数
- Function callback（可选）：载入成功时的回调函数
- String type（可选）：返回内容格式，xml，html，script，json，text，_default
- $.post(url, [data], [callback], [type]);
- $.ajax(option1:value1,option2:value2);
测试jQuery是否引入成功的代码
$(function()
alert();
);get提交和post提交的区别有三点
- 请求参数位置不同
- get提交不安全，post提交相对安全
- get提交限制大小，post提交不限制大小
jQuery的get和post提交
post提交不用担心中文乱码，因为方法已经帮我们解决了。
jQuery的ajax方法
$.ajax(option1:value1,option2:value2);
常用的option如下：
- async：是否异步，默认是true，代表异步
- data：发送到服务器的参数，建议使用json格式
- dataType：服务器端返回的数据类型，常用text和json
- success：成功响应执行的函数，对应的类型是function类型
- type：请求方式，GET/POST
- url：请求服务器端地址
jQuery的Ajax技术：三种请求方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery-ajax</title>
<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
function fn1()
// get异步访问
$.get(
"/web-ajax/ajaxServlet2",// 访问的url地址
"name":"张三","age":18,// json格式的请求参数
// 执行成功的回调函数
function(data)
alert(data.age);
,
// 返回数据的格式，也就是data的格式
"json"
);
function fn2()
// post异步访问
$.post(
"/web-ajax/ajaxServlet2",// 访问的url地址
"name":"张三","age":18,// json格式的请求参数
// 执行成功的回调函数
function(data)
alert(data.name);
,
// 返回数据的格式，也就是data的格式
"json"
);
function fn3()
// ajax异步访问
$.ajax(
// 访问的url
url:"/web-ajax/ajaxServlet2",
// json格式的请求参数
data:"name":"张三","age":18,
// 请求方式
type:"POST",
// 请求成功的回调函数
success:function(data)
alert(data.name);
,
// 请求失败的回调函数
error:function()
alert("请求失败");
,
// 预期服务器返回的数据类型
dataType:"json",
// 是否异步，默认为true
async:true
);
</script>
</head>
<body>
<input type="button" value="Ajax的get访问" onclick="fn1()"><br>
<input type="button" value="Ajax的post访问" onclick="fn2()"><br>
<input type="button" value="Ajax的ajax访问" onclick="fn3()"><br>
</body>
</html>以上是关于jQuery学习的主要内容，如果未能解决你的问题，请参考以下文章
[jQuery学习系列五 ]5-Jquery学习五-表单验证