2013-09-27 2 views
0

Я пытаюсь решить проблемы, которые у меня есть, с переданными значениями из формы в javascript.Передача полей формы на python через ajax и обработка возвращаемого значения

Вот код. Скрипт python работает без проблем и будет получать значения формы каждый раз.

<head> 
    <title>Line Chart</title> 
    <script> 
     function clickme() { 
     putgraph(); 
     } 
    </script> 
    <script> 
     function alertbox() { 
       alert(ajaxResponse); 
     } 
    </script> 
    <script src="Chart.js"></script> 
    <script src="jquery.js"></script> 
    <script> 
        function drawgraph(z) { 
          var v = document.getElementById("frmvar"); 
          v.value = z; 
          return draw(); 
        }; 
        function draw() { 
          var ajaxResponse=null; 
          $.ajax({ 
          url: "/currentcost.py", 
          data: $("form[name='frm']").serialize(), 
          success: function(response){ 
            ajaxResponse=response; 
            }, async: false 
          }); 
        return ajaxResponse; 
        } 
    </script> 
    <script> 
    function putgraph() 
      { 
      tg=drawgraph("t"); 
      alert(tg); 
        var lineChartData = { 
          labels : ["January","February","March","April","May","June","July"], 
          datasets : [ 
            { 
              fillColor : "rgba(220,220,220,0.5)", 
              strokeColor : "rgba(220,220,220,1)", 
              pointColor : "rgba(220,220,220,1)", 
              pointStrokeColor : "#fff", 
              data : [tg] 
              // data : [65,59,90,81,56,55,40] 
            }, 
          ] 
        } 

        var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData); 
      } 
    </script> 

    <meta name = "viewport" content = "initial-scale = 1, user-scalable = no"> 
    <style> 
      canvas{ 
      } 
    </style> 
</head> 

Вот что происходит:

Когда пользователь будет сделано с формой они нажимают на кнопку, которая отправляет его - запускает функцию clickme в верхней части. Это работает putgraph, где я думаю, что все идет не так.

Предупреждение Окно в putgraph дисплеях "undefined", который предлагает мне, функция putgraph начинается перед drawgraph отделки, несмотря на все вещи обратного вызова AJAX должны быть на месте, и работать, прежде чем я положил все это вместе!

Я знаю Javascript асинхронный, но я думал, что функции drawgraph и draw «преодолели» эту проблему с помощью обработчика обратного вызова.

Действительно оценил бы некоторые глаза на это, глядя на то, что я делаю неправильно, и все еще предлагаю способы исправить это.

UPDATE:

Спасибо всем, кто ответил. Я отредактировал сценарий выше с ответом, который я использовал. Я нашел ключевое слово async ДЕЙСТВИТЕЛЬНО полезным, поскольку это устраняло все беспорядочные процедуры обратного вызова. кто НТН в другой :-)

ответ

0

Вы должны вызывать функции, как этот внутри обратного вызова, не после ваш обратный вызов.

Если ваш обратный вызов ничего не делает, кроме «variable = value», тогда нет никакой гарантии, что переменная будет установлена, когда вы просто вызываете другую функцию.

e: кроме того, ваш чертеж ничего не возвращает, поэтому даже если ваш метод действительно работает, вы никогда не передадите данные.

0

как Коллин сказал, что ваш «drawgraph» ничего не возвращает, поскольку он называет только «draw()». У вас есть функция обратного вызова, называемая «handleResource()»: для отладки попробуйте добавить вызов «alert()», это должно дать ответ.

Чтобы углубиться, пожалуйста, поймите, что «draw()» выйдет сразу, а вызов «$ .ajax()» будет работать параллельно (подумайте об этом как «поток»). Таким образом, единственной допустимой точкой выхода в вашем примере является «function handleResource (response)» (называемая функцией «success:»).

Вы можете попробовать следующее (не проверено):

function drawgraph(z, callback) { 
      var v = document.getElementById("frmvar"); 
      v.value = z; 
      function handleResponse(response) { 
        ajaxResponse = response; 
        callback(response); // this will call a function given as parameter to "drawgraph" 
      } 
      draw(handleResponse); 
    }; 

А затем измените вызов:

tg=drawgraph("t", function (response) { 
     alert(response); 
    }); 

Это должно произвести окно с предупреждением, содержащий "ответ".

HTH,

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