2016-05-17 2 views
0

Я застрял на попытке получить данные с помощью AjAX. Ниже приведен код для HTML-формы, которая имеет входное значение. Значение данных передается в обработчик python через кнопку отправки. На стороне сервера обработчик python хранит данные в базе данных.Ajax -Как получить данные

Теперь мне нужно сначала получить данные из базы данных через AJAX и отобразить, есть ли существующее значение. Данные состоят из статуса «да» или «нет», что довольно просто. Но я не знаю, как получить данные с помощью ajax и правильно установить входное значение на основе полученных данных. Вопрос: как я могу вызвать обработчик через Ajax, чтобы вернуть значение?

<html> 
 
<script language="javascript" src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script> 
 

 
<script language="javascript" type="text/javascript"> 
 

 
send_data = function(status) { 
 

 
    $.ajax({ 
 
      url: "/Subscription", 
 
      dataType: "json", 
 
      data: {'status' : status}, 
 
      type: "POST", 
 
      cache: false 
 

 
    }).done(function(data, status, xml) { 
 

 
     var obj = jQuery.parseJSON(data); 
 
     alert(obj.success); 
 

 
    }).fail(function(jqXHR, textStatus, errorThrown) { 
 

 
    }).always(function() { 
 

 
    }); 
 

 
} 
 

 

 
$(document).ready(function() { 
 

 
    $("#subscription").submit(function() { 
 
    send_data($("#switch-1").prop('checked') ? 'yes' : 'no'); 
 
     return false; 
 
    }); 
 

 
}); 
 
</script> 
 

 
</head> 
 
<body> 
 
\t 
 
<form id="subscription" action="" method="post"> 
 
    <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1"> 
 
    <input type="checkbox" id="switch-1" class="mdl-switch__input" id="status" name="status" /> 
 
    <span class="mdl-switch__label">[email protected] subscription status is: <<subscription>> </span> 
 
    <input type="submit" value="Submit" /></label> 
 
</form> 
 
</body> 
 
</html>

спасибо. Любые подсказки будут настолько полезными.

ответ

0

Чтобы выполнить асинхронный вызов на основании пользовательского ввода, вы должны сделать запрос, а затем явно указать, какие действия необходимо выполнить в запросе успешно, терпит неудачу, и т.д.

Например:

function send_data(shouldRequest, successCallback) { 

    // if ...prop('checked'), run ajax request 
    if (shouldRequest) { 
    $.ajax({ 
     url: "/Subscription", 
     dataType: "json", 
     data: {'status' : status}, 
     type: "POST", 
     cache: false 
    }).done(function(data, status, xml) { 

     // when request completes, run callback function 
     successCallback(data); 
    }); 
    } 

} 

$("#subscription").submit(function() { 
    var checked = $("#switch-1").prop('checked'); 

    var successCallback = function(data) { 
    // perform success actions on data here 
    } 

    send_data(checked, successCallback); 
}); 

Если вы передаете successCallback функции send_data, вы можете запустить функцию только тогда, когда асинхронный вызов успешно завершен. Вы также можете передавать другие функции для обработки ошибок и т. Д.

Вы можете дополнительно передать другие функции для обработки различных результатов от вашего запроса ajax, как функции для обработки ошибок.

+0

Спасибо Himmel, а также Питера за совет. Мне удалось успешно установить состояние статуса. Я закончил тем, что модифицировал javascript для использования Switch Light Material Design (используя инструкцию ввода) и установил правильное состояние. Кроме того, произошла ошибка: «return false»; в новой измененной функции щелчка. Большое спасибо за ваш совет. – user2690151

0

Установив dataType:"json" в ajax, нет необходимости использовать JSON.parse() по адресу done() callback.

Использование data.success или data.status в зависимости от вашего json.

ответ Пример JSON {'success':'yes'} или {'status':'yes'}

Смежные вопросы