day19-Ajax内容基本整理

一、前言

　　之前我们初识了ajax的知识，也进行了总结，现在我们队ajax的内容进行一个基本整理，看看还需要注意什么，再之前的内容基础上再稍微添加点东西。使得友情提示更加的友好。

二、示例改进

2.1、添加友情提示

说明：我们在view.py添加信息的时候，我们应该在后台提供一个字典，这个字典，里面包括状态、错误信息、以及数据，再通过HttpRespose返回给前端的回调函数。

def test_ajax(request):
    import json
    ret = {'status':True,'error':None,'data':None}  #status存放状态、error存放错误信息、data存放传过去的数据
    try:
        h = request.POST.get("hostname")
        i = request.POST.get("ip")
        p = request.POST.get("port")
        b = request.POST.get("business_id")
        if h and len(h) > 5:
            models.Host.objects.create(
                hostname=h,
                ip=i,
                port=p,
                business_id=b
            )
        else:
            ret['status'] = False
            ret["error"] = '太短了'
    except Exception as e:
        ret['status'] = False
        ret["error"] = '请求错误'

    return HttpResponse(json.dumps(ret))   #因为HttpResponse存入的字符串，所以这边要序列化成字符串

2.2、前端ajax处理

说明：前端拿到之后，进行反序列化，之后根据状态，来判断给出什么提示。

$(function(){
    $("#ajax_submit").click(function(){
        $.ajax({
            url:"/test_ajax/",
            type: "POST",
            data:$('#add_form').serialize(), //把form里面的所有的值打包发到后台
            success: function(data){
                var obj = JSON.parse(data);  //反序列化成字典类型
                if(obj.status){   //获取状态
                    location.reload();
                }else {
                    $("#error_msg").text(obj.error);  //给出错误提示
                }
            }
        })
    })
})

如图：

三、 内容整理

3.1、ajax 的基本语法

$.ajax({
    url:'url连接'，
    type:'POST/GET'，
    data:{'k1':'v1','k2':'v2'},或者  $('#id').serialize()  //把form里面的所有的值打包发到后台,一般情况下用后面这种情况比较多
    success: function(data){
        // data是服务器端返回的字符串
        var obj = JSON.parse(data);
    }
})

//建议： 永远让服务器端返回一个字典
//即： return  HttpResponse(json.dumps(字典))

问：那这边小伙伴就有疑问了，那我能不能：return render()或者renturn  redirect()呐？

答：①其实是可以用render的，但是不可以用redirect的，因为form表单提交完毕之后肯定会刷新的，但是ajax本身就是静态的，它提交之后页面是不会动的，但是你这个时候要叫人家用redirect去刷新，人家理都不会理你的。②如果用render是可以的，我们说render是返回的一个html的一个字符串，然后把数据传进入进行渲染，你如果穿返回一个字符串给ajax，ajax接收到字符串无法进行反序列化，操作相当麻烦。所以这两个我们都不用，只用HttpResponse。传入序列化之后的对象。