Django Q搜索 - 爱码网

示例中知识点：

1. Q生成查询条件

2. json 序列化

3. 前段创建新标签

css：

*{
    margin: 0px;
    padding: 0px;
}
input, button, textarea {
    outline: none;
    -webkit-appearance: none;
    border-radius: 0;
}
.search{
    margin-left: 20px;
    margin-top: 20px;
}
.search .item{
    margin-top: 10px;
}
.search .item .button{
    width: 20px;
    text-align: center;
}
.search > input{
    margin-top: 20px;
    padding: 5px;
    font-weight: bold;
    color: white;
}

table
  {
  border-collapse:collapse;
  }


th
  {
  height:50px;
  }

table, td, th
  {
  border:1px solid green;
  }

th
  {
  background-color:green;
  color:white;
  }
td
  {
  padding:15px;
  }

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="/static/css/Q_search.css">
</head>
<body>
    <div class="search">
        <div class="item">
             <input type="button" value="+" class="button">
             <select>
                <option value="name">书名</option>
                <option value="book_type__name">图书类型</option>
                <option value="price">价格</option>
             </select>
            <input type="text" name='name'>
        </div>
        <input type="button" value="Search">
    </div>
    <div class="result">

    </div>


<script src="/static/js/jquery-3.2.1.min.js"></script>
<script src="/static/js/Q_search.js"></script>
</body>
</html>

View Code