Ajax

一、choice参数

chiice参数可将序号转变为其对应的内容：

# 性别
choices = (
(1,'male'),
(2,'female'),
)
gender = models.IntegerField(choices=choices)

注意：choice()参数中储存的是元组；如果存储的数字不在元组范围内的话，依然可以输出，但是没有内容，输出的只是数字。

获取字段：

from app01 import models
user_obj = models.Userinfo.objects.filter(pk=2).first()
print(user_obj.username)
print(user_obj.get_gender_display())

	choice()方法中，希望获取数字对应的内容时，不能直接使用点字段的方法，而是使用固定句式“数据对象.get_字段名\_display()”，没有对应关系的时候，取到的还是数字。

二、MTV与MVC模型

django看起来是MTV模型框架，实际采用的时MVC。

MTV: models、templates、views;

MVC: models、views、controller(控制器)

三、ajax

AJAX（Asynchronous Javascript And XML）：“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输XML数据。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

3.1 展示在线加法运算

展示一个前端页面页面上有三个输入框前两个框输入数字点击按钮朝后端发请求页面不刷新的情况下完成数字的加法运算：

<input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
<p>
    <button id="b1">
        计算
    </button>
</p>

$('#b1').on('click',function(){
//向后端提交post数据
$.ajax({
		//1.向后端发送数据的地址
		url:'',//专门用来控制朝后端提交数据的地址  不写默认就是朝当前地址提交
		//2.发送的请求的类型
		type:'post',//专门制定ajax发送的请求方式
		//3.发送的数据类型
		data:{'t1':$('#t1').val(),'t2':$('#t2').val()},
		//4.异步提交的任务，需要通过回调函数来处理
		success：function(data){
		//data形参指代的就是异步提交的返回结果
		//通过DOM操作将内容渲染到标签内容上
		$('#t3').val(data)
		}
	})
})

3.2 使用Ajax传json格式数据

django后端针对json格式的数据，不会自动解析，会放置到request.body中，需要手动处理、获取数据。

json_bytes = request.body
json_str = str(json_bytes,encoding='utf8')
json_dict = json.loads(json_str)

注意：需要指定contentType参数：

要确保发送的数据是json格式：

contentType:'application/json',
    
data:JSON.stringify({'username':'json','password':'123'})

3.3 ajax传输文件

传输文件需要使用内置对象Formdata,该对象既可以传键值对，也可以传文件。

获取input标签中用户上传的文件的文件内容：

1.先通过jquery查找到该标签；

2.将jquery对象转换成原生的js对象；

3.利用原生js对象的点方法直接获取文件内容。

$('#t3')[0].files[0]

传输文件：

$('#b1').click(function){
	//1.生成一个formata对象
	var myFormData = new FormData();
	//2.朝对象总添加普通键值
	myForData.append('username',$("#t1").val());
	myForData.append('username',$("#t2").val());
	//3.朝对象中添加文件数据
		//1.先通过jquery查找到该标签
		//2.将jquery对象转换成原生的js对象
		//3.利用原生js对象的点方法直接获取文件内容。
	myFormData.append('myfile',$('#t3')[0].files[0]);
	$.ajax({
		url:'',
		type:'post',
		data:myFormData,
		// ajax传文件一定要指定两个关键性的参数
		contentType:false,//不用任何编码 因为formdata对象自带编码 django能够识别该对象
		processData:false,//不需要处理数据，直接发送就行
		succsee:function(data){
			alert(data)
		}
	})
}

3.4 contentType前后端传输数据编码格式

form表单默认的提交数据格式是urlencoded（例如：username = admin&password=123这种格式），django后端针对urlencode数据格式会自动解析，将结果打包给request.POST，用户可以从request.POST获取信息。

django后端针对formdata格式类型数据也会自动解析，但是不会放入request.POST中，而是放到了request.FILES中。

ajax默认的提交数据的编码格式是urlencoded。

注意：django后端会针对不同的编码格式，使用不同的机制处理并获取数据。因此前后端数据交互时一定标明数据格式！

3.5 序列化组件

后端将数据查询后返回给前端，应该是字典套列表的格式。

def a(request):
    user_queryset = modelds.Userinfo.object.all()
    user_list = []
    for user_obj inuser_queryset:
        user_list.append({
            'username':user_obj.username,
            'password':user_obj.password,
            'gender':user_obj.get_gender_display(),
        })
    return reder(request,'a.html',locals())

以上方法可以实现格式要求，但是使用serializers模块，可以更快捷实现：

from django.core import serializes
def a(request):
    res = serializers.serializer('json',user_queryst)
    peturn render(request,'a.html',locasl())

3.6 ajax + sweetalert

使用sweetalert需要先下载Bootstrap-sweetalert项目。

<head>
    {% load static %}
    <link rel="stylesheet" href="{%static 'dist/sweeralert.css' %}">
    <scriot src='{% static 'dic/sweetalert.mon.js' %}'></scriot>
</head>
<body>
    <script>
        $('.cancel').click(function()){
        	var $btn = $(this);
        	swal({
                title:'确定删除么？'，
                text:'删除了就没有了'，
                type:'warning',
                showCancelButton:true,
                confirmButtonClass:'btn-danger',
                confirmButtonText:'是的我就要删',
                cancelButtonText:'算了，不删了'
                closeOnConfirm:false,
                showLoaderOnConfirm:ture,
            },
                 function({
                     $.ajax({
                     	url:'',
                     	type:'post',
                     	data:{'delete_id':$btn.attr('delete_id')},
                 		success:function(data){
                			if(data.code==1000){
                                swal(data.msg,'删除成功','success');
                                //1.直接刷新
                                window.location.reload()
                                //2.通过DOM，实时删除
                                $btn.parent().parent().remove()
                            }else{swal('发生未知错误','info')}
            				}
                 		}
                 	});
                
        		}),
          })
    
    </script>
</body>

posted @ 2019-10-28 21:12 唐ceng 阅读(138) 评论(0) 收藏举报

刷新页面返回顶部

唐ceng

Ajax

Ajax

一、choice参数

二、MTV与MVC模型

三、ajax

3.1 展示在线加法运算

3.2 使用Ajax传json格式数据

3.3 ajax传输文件

3.4 contentType前后端传输数据编码格式

3.5 序列化组件

3.6 ajax + sweetalert

公告