Ajax学习笔记

原创

于 2024-03-26 12:20:04 发布

· 701 阅读

7 ·

版权

文章标签：

#ajax #学习 #笔记

本文详细介绍了Ajax在前端与后端交互中的应用，包括使用jQuery实现Ajax请求的代码模板，GET和POST方式的区别，以及如何处理不同格式的数据（urlencoded、formdata、json）。此外，还讨论了CSRF认证的相关知识，如如何在Ajax请求中携带CSRF令牌以通过Django的CSRF验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ajax学习笔记

前端与后端交互一般有两种方式，一种是URL和表单形式提交发送请求，第二种就是这里要提到的Ajax

URL和表单形式提交发送请求

GET
POST
特点：需要页面刷新，才能得到请求内容

Ajax方式

用jQuery实现

代码模板

$,ajax({
   
	url:'target/url', //向这个URL发送请求
	data: data, //需要发送的数据
	type:'POST',//或者是GET,请求方式
	dataType:'json',//指定服务器响应的数据类型 JSON、XML、HTML
    processData : false, // 告诉 jQuery 不要处理发送的数据,或者'application/json'
    contentType : false, // 告诉 jQuery 不要设置 Content-Type 请求头
    // 在发送请求之前执行的回调函数
    beforeSend: function(xhr) {
   
     	....
	},
	success: function (data) {
    // 请求成功后的回调函数，data是返回的数据
		....
	},
    error: function(xhr, status, error) {
    // 请求失败后的回调函数
        console.error('请求失败', error);
     }
});

GET方式

适用场景：
获取数据或资源。
不修改服务器状态的请求。

$.ajax({
   
    url: '/api/data',  // 请求的 URL
    type: 'GET',       // 请求类型
    data: {
   
        'param1': 'value1',
        'param2': 'value2'
    },
    success: function(data) {
   
        console.log(data);
    }
});