django,ADMINLTE做出jquery mobile模糊查询效果,再刷新全屏
时间: 2023-08-16 16:06:59 浏览: 94
jquery模糊查询
你可以使用Django的视图来处理AJAX请求,并使用jQuery Mobile的AJAX功能将查询发送到服务器。在服务器端,您可以使用Django ORM来执行模糊查询,并返回JSON格式的结果。在前端,您可以使用jQuery Mobile的列表视图来显示结果,并使用jQuery Mobile的刷新功能来实现全屏刷新。
以下是一个简单的示例:
1. 在Django中定义视图来处理查询请求:
```python
from django.http import JsonResponse
from django.views.decorators.http import require_POST
from myapp.models import MyModel
@require_POST
def search(request):
query = request.POST.get('query', '')
results = MyModel.objects.filter(name__icontains=query)
data = [{'id': r.id, 'name': r.name} for r in results]
return JsonResponse({'results': data})
```
2. 在前端使用jQuery Mobile的AJAX功能发送查询请求和刷新请求:
```javascript
$(document).on('pagecreate', '#my-page', function() {
$('#search-form').on('submit', function(e) {
e.preventDefault();
var query = $('#search-input').val();
$.post('/search/', {query: query}, function(data) {
var $list = $('#result-list').empty();
$.each(data.results, function(i, result) {
$list.append('<li><a href="/detail/' + result.id + '">' + result.name + '</a></li>');
});
$list.listview('refresh');
});
});
$('#refresh-button').on('click', function() {
$.mobile.changePage(window.location.href, {allowSamePageTransition: true, transition: 'none', reloadPage: true});
});
});
```
3. 在前端使用jQuery Mobile的列表视图和刷新功能来显示结果并实现全屏刷新:
```html
<div data-role="page" id="my-page">
<div data-role="header">
<h1>My App</h1>
</div>
<div data-role="content">
<form id="search-form">
<input type="text" id="search-input" placeholder="Search...">
<input type="submit" value="Search">
</form>
<ul data-role="listview" id="result-list"></ul>
<a href="#" id="refresh-button" data-role="button" data-icon="refresh" data-iconpos="notext">Refresh</a>
</div>
</div>
```
这样,您就可以使用Django、jQuery Mobile和AJAX来实现模糊查询和全屏刷新的功能了。
阅读全文