Javascript ile Ajax değerini kullanma

Bir javascript'ten (Virtualjoystick.js) iki değer (x ve y) almaya çalışıyorum ve bunları bir (prototype.js) Ajax komut dosyasına iletiyorum. Benzer soruları ve cevapları burada ve diğer web sitelerinde okudum ama gerçekten 'almadım' değilim! Herhangi bir yardım büyük takdir edilecektir.Javascript ile Ajax değerini kullanma

Şimdiye kadar sahip olduğum şeyin basitleştirilmiş bir sürümüdür. Ben gerekenler

<html> 
 
<head> 
 
<script src="JavaScripts/prototype.js"></script> 
 
<script src="JavaScripts/virtualjoystick.js"></script> 
 
</head> 
 
<body> 
 
<div id="info"> 
 
    <span id="result"><b>Joystick:</b> X:0 Y:0</span> 
 
</div> 
 
<div id="container"> 
 
<canvas height="300" width="300"></canvas> 
 
<canvas height="300" width="300"></canvas> 
 
    
 
<script> 
 
console.log("touchscreen is", VirtualJoystick.touchScreenAvailable() ? "available" : "not available"); 
 
    
 
var joystick = new VirtualJoystick({ 
 
     container : document.getElementById('container'), 
 
     mouseSupport : true, 
 
     stationaryBase: true, 
 
     baseX: 150, 
 
     baseY: 150, 
 
     limitStickTravel: true, 
 
     stickRadius: 100 
 

 
     }); 
 
     joystick.addEventListener('touchStart', function(){ 
 
     console.log('down') 
 
     }) 
 
     joystick.addEventListener('touchEnd', function(){ 
 
     console.log('up') 
 
     }) 
 

 
     setInterval(function(){ 
 
     var outputEl = document.getElementById('result'); 
 
     outputEl.innerHTML = '<b>Result:</b> ' 
 
      + ' X:'+parseInt(joystick.deltaX()) 
 
      + ' Y:'+parseInt(joystick.deltaY()) 
 
     }, 1/30 * 1000); 
 
    </script> 
 

 

 
</div> 
 

 
<div> 
 
<form> 
 
\t <input type="button" value="On" onClick="go('60.30')" style="font-size:200%;"><br /> 
 
\t <input type="button" value="Off" onClick="go('0.0')" style="font-size:200%;"> 
 
</form> 
 
    <script type="text/javascript"> 
 
     function go(qry) { 
 
\t  new Ajax.Request('motor_control.py?q='+ qry, 
 
\t  \t {method: 'GET'} 
 
     ); 
 
     } 
 
    </script> 
 
</div> 
 

 

 
</body> 
 
</html>

parseInt(joystick.deltaX()) ve virtualjoystick.js komut +parseInt(joystick.deltaY()) Ajax.Request sonuna yazılacak olmaktır. Bir şey gibi:

new Ajax.Request('motor_control.py?q='+parseInt(joystick.deltaX()) 
 
      + '.'+parseInt(joystick.deltaY()),

Denedim ama işe görünmüyordu!

Muhtemelen JavaScript'in bana yabancı bir dil olduğunu söyleyebildiğiniz gibi, herhangi bir yardım için teşekkür ederiz.

kaynak

2016-03-22 Huw

"o iş değildi" - Ne olmasını bekliyordunuz? Gerçekte ne oldu? Tarayıcınızın Geliştirici Araçları konsolunda bildirilen hatalar var mı? Geliştirici Araçları'nın Ağ sekmesinde HTTP isteğini görüyor musunuz? Talep beklediğiniz gibi yapılmış mıydı? Bir cevap aldı mı? Yanıttaki durum kodu doğru muydu? Yanıtın içeriği doğru muydu? – Quentin

Hiçbir şey olmadı! Ve günlüklerde hiçbir şey görünmedi. Benim varsayımım 'girişimi' başarısız oldu! Dürüst olmak gerekirse Geliştirici Araçları konsolunu düşünmedim. Benim deneyimim PHP ve Python'dur, bu yüzden günlük dosyaları hata ayıklamaya başladığım yerdir! Geliştirici konsolunun söyleyeceklerine bir göz atacağım. – Huw

-1

Düz JavaScript kullanmak istiyorsanız, aşağıdaki örnekte olduğu gibi kullanabilirsiniz. AJAX tipi işlevini kullanırken, yalnızca işlev tarafından geri arama veya vaat etme işlevinin içinden alınan veriler üzerinde işlem yapabileceğinizi unutmayın. Ajax işlevini çalışırken görmek için aşağıdaki linke tıklayın.

Live Example

JavaScript:

//path to the file you are sending and retrieving data 
//this will differ from the Plunker link code because 
//I do not have access to the url in your example. 
var url = "motor_control.py?q='+ qry"; 

//call get Ajax function 
get(url,function(data){//begin call back function 


    //do something with data variable here 


    //change the innerHTML of the example id element. 
    document.getElementById("example").innerHTML = "I was rendered by an AJAX function!" 


});//end call back function 

function get(url,fn){//begin ajax function 

     var contentType; 

     //variable to hold the xmlhttp object 
     var xmlhttp = null; 


     //if the browser contains the object 
     if(window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari 

       //create a new XMLHttpRequest object 
       xmlhttp=new XMLHttpRequest(); 
     } 


      //add the event listenter 
      xmlhttp.onreadystatechange = function(){  

     //if the status of the request is good 
     if (xmlhttp.readyState===4 && xmlhttp.status===200){//begin if then 

     //get the response text and store it in the data variable 
     var data = xmlhttp.responseText;  

     //call the callback function 
     fn(data,fn); 

     }//end if then    


    };//end function 


    //open a the http request 
    xmlhttp.open("GET",url,true); 

    //set the request header 
    xmlhttp.setRequestHeader("Content-type",contentType); 

    //send the the request 
    xmlhttp.send(); 


    }//end get function

kaynak

2016-03-22 12:09:43

Genel bir tanıtım Ajax öğreticisi vermekten yana olanın içeriğini tamamen göz ardı etmiş görünüyorsunuz. – Quentin

Neden bir GET isteğinde bir "İçerik Türü" istek başlığı ayarlıyorsunuz? – Quentin

Neden IE 6'yı 2016 yılında destekliyorsunuz? – Quentin

Javascript ile Ajax değerini kullanma

cevap

İlgili konular