Я связываю, чтобы сделать ajax-вызов с jquery в представлении django. Этот вид запрашивает внешний API и возвращает результат. Я пытаюсь вернуть данные и манипулировать им в обратном вызове успеха в вызове ajax, но вместо этого я получаю отображаемый html-сайт, показывающий содержание ответа. Вот мой код.
Моя форма:
<form class="form-inline" method="get" action="/search/">
<div class="input-group">
<input type="text" class="form-control" id="search" name="search" placeholder="Search">
</div>
<button id="btn-search" class="btn btn-default" type="submit">SEARCH</button>
</form>
Мой вызов ajax:
$('#btn-search').click(function() {
var params = {
'query': $('#search').val()
}
$.ajax({
data: params,
url: JS_URLS['search'],
type: 'get',
success: function (data) {
alert("SUCCESS");
},
error: function (data) {
alert("ERROR");
}
});
})
Мой взгляд:
def search(request):
if request.GET:
params = {
'name' : request.GET['search'],
}
encoded_params = urllib.urlencode(params)
response = execute_request(url)
return HttpResponse(json.dumps(response), content_type='application/json')
Что я получаю:
Очевидно, что ответ не возвращается в функцию ajax, потому что я не получаю предупреждающее сообщение, заданное как для успешных, так и для обратных вызовов ошибок.
Подача формы через GET
вызывает событие перезагрузки в вашем браузере.
Вы должны предотвратить поведение по умолчанию вашей формы, правильным местом для этого является сам элемент формы.
Дайте вашей форме ID:
<form id="mysearchform" class="form-inline" method="get" action="/search/">
<div class="input-group">
<input type="text" class="form-control" id="search" name="search" placeholder="Search">
</div>
<button id="btn-search" class="btn btn-default" type="submit">SEARCH</button>
</form>
Измените javascript на:
$("#mysearchform").submit(function(e){
e.preventDefault();
var params = {
'query': $('#search').val()
}
$.ajax({
data: params,
url: JS_URLS['search'],
type: 'get',
success: function (data) {
alert("SUCCESS");
},
error: function (data) {
alert("ERROR");
}
});
return false;
});
Здесь важно предотвратить дальнейшее выполнение поведения представления формы по умолчанию. e.preventDefault()
и return false
позаботиться об этом.
Вам не нужна форма вообще для того, что вы пытаетесь сделать:
<div class="input-group">
<input type="text" class="form-control" id="search" name="search" placeholder="Search">
</div>
<button id="btn-search" class="btn btn-default">SEARCH</button>
Измените javascript на:
$("#btn-search").click(function(e){
$.ajax({
url: JS_URLS['search']+'?query='+$('#search').val(),
type: 'get',
success: function (data) {
alert("SUCCESS");
},
error: function (data) {
alert("ERROR");
}
});
return false;
});
Это также будет работать в форме, но не ставьте на него type="submit"
.
В качестве данных вы отправляете params
, у которых есть query
как ключевое слово, а не search
. Таким образом, вы, вероятно, получаете KeyError, потому что у вас нет search
установленного в вашем querystring. И это возвращает страницу ошибки jango yellow, которая является html. И проверьте http://api.jquery.com/jquery.getjson/
#search
является элементом, вам нужно , чтобы предотвратить действие по умолчанию.a
Ты этим занимаешься?