ajax异步请求关键字提示（适用于注册用户时显示已注册用户，避免重复）

1.前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>staff_insert.html</title>
    <script src="/static/js/jquery-1.12.4.js"></script>
</head>
<body>
 <form action="{% url 'bumen:staff_insert_handler' %}" method="post" enctype="multipart/form-data">
     {% csrf_token %}
    <table>
        <tr>
            <td>员工姓名</td>
            <td>

                <input id = "sname"  name="sname" />
                <div id="show">
                   <ul></ul>
                </div>
            </td>
        </tr>
        <tr>
            <td>入职日期</td>
            <td>
                <input name='bpubdate'/>
            </td>
        </tr>
        <tr>
            <td>所属部门</td>
            <td>
                <select name="sdepartment_id">
                    {% for i in department_list%}
                        <option value="{{i.id}}">{{i.dname}}</option>
                    {%endfor%}
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                 <input type="submit" />
            </td>
        </tr>
    </table>
 </form>
 <script src="/static/js/jquery-1.12.4.js"></script>
<script>
        $(function () {
            $("#sname").keyup(function () {
                console.log($(this).val().trim())
                $.ajax({
                    "url": "/bumen/getsname",
                    "data": {
                        "sname":$(this).val().trim()
                    },
                    "success": function (data) {
                        $("#show ul").html("")
                        if(data.ret.length!=0){
                            data.ret.forEach(function (value) {
                              $("#show ul").append("<li>" + '用户名已存在' + "</li>")
                               // $("#show ul").append("<li>" + value["sname"] + "</li>")
                            })
                        }else {
                            $("#show ul").append("<li>" + '用户名可用'+ "</li>")
                        }
                    },
                })
            })
        })
    </script>
</body>
</html>

（1）可显示用户名

$("#show ul").append("<li>" + value["sname"] + "</li>")

（2）可灵活改写成注册页面提示用户名已存在

  $("#show ul").append("<li>" + '用户名已存在' + "</li>")

2.后端代码

def getsname(request):
    sname = request.GET.get("sname")
    if sname == "":
        ret = {
            "ret": []
        }
        return HttpResponse(json.dumps(ret, ensure_ascii=False), content_type="application/json;charset=utf-8")

    sname_list = Staff.objects.filter(sname__icontains=sname).values("sname")  #icontains:忽略大小写状态下的模糊查询,contains: 精确大小写状态下的模糊查询

    info = []
    for i in sname_list:
        d = {}
        d["sname"] = i["sname"]
        info.append(d)

    ret = {
        "ret": info
    }

    return HttpResponse(json.dumps(ret, ensure_ascii=False), content_type="application/json;charset=utf-8")

难点：
（1）icontains:忽略大小写状态下的模糊查询,contains: 精确大小写状态下的模糊查询

sname_list = Staff.objects.filter(sname__icontains=sname).values("sname")

（2）JSON中的object对应的是Python中的dict，因此要对Python中的自定义数据类型的对象进行序列化，就需要先把这个对象转换成json模块可以直接进行序列化dict类型。由此可知，这个转换函数是要完成的是Python对象（不是JSON对象）与dict之间的相互转换，且序列化时转换过程是“Python对象 --> dict --> JSON object”，
反序列化的过程是“JSON object -> dict --> Python对象”。所以，我们需要编写两个转换函数来分别实现序列化和反序列化时的转换过程。
(下面这段代码为转换为dict过程)

info = []
    for i in sname_list:
        d = {}
        d["sname"] = i["sname"]
        info.append(d)

    ret = {
        "ret": info
    }

（3）JSON中的object对应的是Python中的dict，因此要对Python中的自定义数据类型的对象进行序列化，就需要先把这个对象转换成json模块可以直接进行序列化dict类型。由此可知，这个转换函数是要完成的是Python对象（不是JSON对象）与dict之间的相互转换，且序列化时转换过程是“Python对象 --> dict --> JSON object”，反序列化的过程是“JSON object -> dict --> Python对象”。所以，我们需要编写两个转换函数来分别实现序列化和反序列化时的转换过程。

json.dumps(ret, ensure_ascii=False)

同时，json.dumps(ret, ensure_ascii=False)得到类型为Json类型，刚好能传到前台，问题解决。
结语：小知识点解释可参考云游道士-博客园

ajax异步请求关键字提示（适用于注册用户时显示已注册用户，避免重复）

猜你喜欢