Jquery实现Ajax请求的几种常见方式总结

欢迎大家来到IT世界,在知识的湖畔探索吧!

1.1、JQuery的GET方式实现AJAX

核心语法：$.get(url,[data],[callback],[type]);

url：请求的资源路径。

data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。

callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。

type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

代码实现

 
    
  

    姓名： 
    
    
   
 密码： 
    
   
 
    
  

<script src="js/jquery-3.3.1.min.js"></script>
<script>
//1.为用户名绑定失去焦点事件
$("#username").blur(function () {
let username = $("#username").val();
//2.jQuery的GET方式实现AJAX
$.get(
//请求的资源路径
"userServlet",
//请求参数
"username=" + username,
//回调函数
function (data) {
//将响应的数据显示到span标签
$("#uSpan").html(data);
},
//响应数据形式
"text"
);
});
</script>

欢迎大家来到IT世界,在知识的湖畔探索吧!

1.2、JQuery的POST方式实现AJAX

核心语法：$.post(url,[data],[callback],[type]);

url：请求的资源路径。

data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。

callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。

type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

代码实现

欢迎大家来到IT世界,在知识的湖畔探索吧! 
    
  

    姓名： 
    
    
   
 密码： 
    
   
 
    
  

<script src="js/jquery-3.3.1.min.js"></script>
<script>
//1.为用户名绑定失去焦点事件
$("#username").blur(function () {
let username = $("#username").val();
//2.jQuery的POST方式实现AJAX
$.post(
//请求的资源路径
"userServlet",
//请求参数
"username=" + username,
//回调函数
function (data) {
//将响应的数据显示到span标签
$("#uSpan").html(data);
},
//响应数据形式
"text"
);
});
</script>

1.6、JQuery的通用方式实现AJAX

核心语法：$.ajax({name:value,name:value,…});

url：请求的资源路径。

async：是否异步请求，true-是，false-否 (默认是 true)。

data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。

type：请求方式，POST 或 GET (默认是 GET)。

dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

success：请求成功时调用的回调函数。

error：请求失败时调用的回调函数。

代码实现

 
    
  

    姓名： 
    
    
   
 密码： 
    
   
 
    
  

<script src="js/jquery-3.3.1.min.js"></script>
<script>
//1.为用户名绑定失去焦点事件
$("#username").blur(function () {
let username = $("#username").val();
//2.jQuery的通用方式实现AJAX
$.ajax({
//请求资源路径
url:"userServletxxx",
//是否异步
async:true,
//请求参数
data:"username="+username,
//请求方式
type:"POST",
//数据形式
dataType:"text",
//请求成功后调用的回调函数
success:function (data) {
//将响应的数据显示到span标签
$("#uSpan").html(data);
},
//请求失败后调用的回调函数
error:function () {
alert("操作失败...");
}
});
});
</script>

1.7、小结

AJAX(Asynchronous JavaScript And XML)：异步的 JavaScript 和 XML。

通过浏览器与服务器进行少量数据交换，就可以使网页实现异步更新。也就是在不重新加载整个页面的情况下，对网页的部 分内容进行局部更新。

同步和异步

同步：服务器端在处理过程中，无法进行其他操作。

异步：服务器端在处理过程中，可以进行其他操作。

GET 方式实现：$.get();

POST 方式实现：$.post();

url：请求的资源路径。

data：发送给服务器端的请求参数，格式可以是key=value，也可以是 js 对象。

callback：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码。

type：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

通用方式实现：$.ajax();

url：请求的资源路径。

async：是否异步请求，true-是，false-否 (默认是 true)。

data：发送到服务器的数据，可以是键值对形式，也可以是 js 对象形式。

type：请求方式，POST 或 GET (默认是 GET)。

dataType：预期的返回数据的类型，取值可以是 xml, html, js, json, text等。

success：请求成功时调用的回调函数。

error：请求失败时调用的回调函数。

欢迎大家来到IT世界,在知识的湖畔探索吧!