jQuery实现Ajax

jQuery框架对js原生的ajax进行了封装，封装后的ajax相比原生就变的更加简洁方便，而且功能更加丰富

常用的三种ajax实现的方法：

get：$.get(url,[data],[callback],[type])
post：$.get(url,[data],[callback],[type])
ajax：$.ajax({setings})

url：请求的路径

data：发送的数据，必须是key=value的形式，之间用&分隔

callback：回调函数，处理响应的信息

type：响应返回的数据类型（xml、html、script、json、text等）

$.get()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jquery ajax</title><script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<h3>输入框内容改变时，验证用户名是否可用</h3>
用户名：<input id="username" type="text">
<span id="span"></span>
<script>$(function (){$("#username").change(function (){var name = $(this).val();$.get("ajaxServlet","username="+name,function (data){$("#span").html(data);})})})
</script>
</body>
</html>

$.post()

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jquery ajax</title><script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<h3>输入框内容改变时，验证用户名是否可用</h3>
用户名：<input id="username" type="text">
<span id="span"></span><script>$(function (){$("#username").change(function (){var name = $(this).val();$.post("ajaxServlet",{"username":name},function (data){$("#span").html(data);})})})</script>
</body>
</html>

$.ajax()

实际应用中更多的都是使用这种方法，虽然前两种方法比较简单，但是这个方法可以完成更多的ajax异步请求的需求

setings是一个js的数组对象，格式：{key:value,key:value···}

setings中常用的属性：

url：请求地址
data：发送到服务器的数据，键值对形式
type：请求方式，（get、post···默认get）
dataType：服务器返回数据的类型，xml、html、json、text等
success：请求成功后执行的回调函数
error：请求失败后执行的回调函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ajax</title><script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<input id="username" type="text"/>
<span id="span1"></span>
<script>$(function (){$("#username").change(function (){var name = $(this).val();$.ajax({url:"ajaxServlet",data:"username="+name,type:"get",dataType:"text",success:function (data){$("#span1").html(data)},error:function (){$("#span1").html("请求失败")}})})})
</script>
</body>
</html>

jQuery实现Ajax异步请求的三种方式相关推荐

ajax是一种异步的请求方式,ajax异步请求的三种方式
Ajax能够在无需加载整个页面的情况下,能够更新部分网页内容,可以减小服务器的资源浪费. ajax大体上有四种实现方式,由于基于JS的实现方式太过于复杂,基本上用不到,所以就暂不贴出其实现代码了. 1 ...
JSP同步请求和html+ajax异步请求的两种方式
war包:包括所有的项目资源,只要从浏览器发起的都是属于请求,然后把资源响应给浏览器,解析显示出来. 方式一:HTML+ajax(跳转静态html也是属于请求响应,把整个页面响应给浏览器.) html ...
ajax异步请求的三种格式
以一个简单的的form表单提交样式为例 <!DOCTYPE html> <html> <head><title>ajax</title>&l ...
jquery的ajax异步请求接收返回json数据
jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以.这篇文 ...
php中jquery ajax请求参数,浅谈Jquery中Ajax异步请求中的async参数的作用
之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html asy.js function testAsync{ var temp; $.ajax( ...
jQuery使用ajax异步请求400解决方法
jQuery使用ajax异步请求访问状态码400解决方法: 先直接上结论:首先检查下自己使用的请求方式,我原来用的是post方式,更改为ajax之后就解决了,才反应过来应该是版本不兼容的问题! < ...
MySQL 8.0 异步复制的三种方式
本实验中分别针对空库.脱机.联机三种方式,配置一主两从的mysql标准异步复制.只做整服务器级别的复制,不考虑对个别库表或使用过滤复制的情况. 实验环境 [root@slave2 ~]# cat /e ...
$.ajax 加了headers报错_Springboot解决Ajax跨域的三种方式
这篇文章不华丽,但比较实用,能解决不少大家实际业务中的问题.大家可以收藏起来,以备用时之需! 1.同源策略 1.1 含义 ajax出现请求跨域错误问题,主要原因就是因为浏览器的"同源策略&q ...
java 异步事件_处理异步事件的三种方式
在网站开发中,异步事件是项目必然需要处理的一个环节,也因为前端框架的兴起,通过框架实现的 SPA 已经是快速建构网站的标配了,一部获取数据也就成了不可或缺的一环:本文来就讲一讲 JavaScript ...

jQuery实现Ajax异步请求的三种方式

jQuery实现Ajax

$.get()

$.post()

$.ajax()

jQuery实现Ajax异步请求的三种方式相关推荐

最新文章

热门文章