Ajax微讲解

Ajax微讲解

Ajax简介

	ajax不是一门全新的知识，本质就是一些js代码，我们学习ajax可以直接使用jQuery封装之后的版本，因为更加的简单，所以
使用ajax的前提就是提前引入jQuery文件。
    ajax能实现的功能就是异步提交，局部刷新，在页面不刷新的情况下可以与后端进行数据交互。学习ajax一定要能够知道与form表单
提交数据的区别，ajax提交数据页面不用刷新，原始数据还在，处理数据的过程中不影响页面其他操作；而form表单提交数据页面刷新，
原始数据就不在了，并且数据处理过程中无法做其他操作
# 代码演示
	需求:计算两个数的和，提交计算之后用户输入的数据不会消失
	views.py代码:
        def add(request):
            print(request.is_ajax())  # 判断是否是Ajax请求
            if request.is_ajax():
                if request.method == 'POST':
                    a1 = request.POST.get('a1')
                    a2 = request.POST.get('a2')
                    res = int(a1) + int(a2)
                    return HttpResponse(res)
            return render(request,'add.html')
	add.html代码:'''先导去jQuery包'''
        <input type="text" id="a1"> + <input type="text" id="a2"> = <input type="text" id="a3">
        <button id="btn">计算</button>
        <script>
            $('#btn').click(function (){
                // 获取两个框里面的值
                let a1Val = $('#a1').val();
                let a2Val = $('#a2').val();
                // 发送Ajax请求
                $.ajax({
                    url:'',  // 不传参数默认就是当前页面的地址
                    type:'post',  // 指定当前请求方式
                    data:{'a1':a1Val,'a2':a2Val},  // 请求携带的数据
                    success:function (args){  // 异步回调函数，后端有回复自动触发
                        $('#a3').val(args)
                    }
                })
            })
        </script>
'''
我们之前讲过异步就是提交完任务之后不在原地等待任务的结果，直接去做其他事情，有结果的话会自动提醒，拿到结果
'''

前后端传输数据编码格式

# 1.form表单默认发送的编码格式
	Content-Type: application/x-www-form-urlencoded
	数据格式:username=ass&password=123
	Django后端会自动处理到:request.POST
# 2.form表单发送文件
	Content-Type: multipart/form-data
	数据格式:隐藏看不了
	Django后端会自动处理到:request.POST,request.FILES
# 3.ajax默认的编码格式
	Content-Type: application/x-www-form-urlencoded
	数据格式:username=ass&password=123
	Django后端会自动处理到:request.POST
'''
Django针对不同的编码方式对应的数据格式会采用不同的处理策略
'''

ajax发送json格式数据

	ajax发送的数据类型要与数据的编码格式一致，所以如果我们想要发送json格式的数据，就要修改ajax的编码格式。
    当我们后端拿到ajax发送的json格式的数据，Django后端针对json格式的数据不会做任何的处理，就封装在request.body中，需要
我们自己处理，注意form表单是没有办法发送json格式的数据的。
# 代码演示
	<button id="a1">提交数据</button>
    <script>
        $('#a1').click(function (){
            $.ajax({
                url:'',
                type:'post',  //不写默认也是get请求
                contentType:'application/json',  // 指定编码格式，不写默认就是urlencoded编码
                data:JSON.stringify({'name':'oscar','pwd':123}),  // 序列化方法
                success:function (args){
 
                }
            })
        })
    </script>

ajax携带文件数据

<input type="text" id="name">
<input type="text" id="pwd">
<input type="file" id="file">
<button id="btn">提交数据</button>
<script>
    $("#btn").click(function () {
        // 需要利用js内置对象FormData
        let myFormData = new FormData();
        // 对象添加普通数据
        myFormData.append('username',$('#name').val())
        myFormData.append('password',$('#pwd').val())
        // 对象添加文件数据
        myFormData.append('my_file',$('#file')[0].files[0])
        // 发送ajax请求
        $.ajax({
            url:'',
            type:'post',
            data:myFormData,
            // 携带文件必须要指定的两个参数
            contentType:false,
            processData:false,
            success:function (args) {
                // 处理异步回调返回的结果
            }
        })
    })
</script>

这里是IT小白陆禄绯，欢迎各位大佬的指点！！！

__EOF__

本文作者：陆禄绯
本文链接：https://www.cnblogs.com/pyqsy/p/16290715.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！