Web servisinden veri alma JSON ile

Birisi bana kodumun nesi yanlış olduğunu söyleyebilir mi? Javascript/JSON'a aşina olmadığım için bir sözdizimi hatası olduğunu düşünüyorum. Şu anda bu kod hiçbir şey yapmıyor. Bu okul projesi içindir; sınıfım, kullanıcıları freetime/sınıf planına dayalı etkinliklere yönelik bir arayüz sağlayarak kullanıcıları birbirine bağlayan bir uygulama oluşturuyor. Teşekkürler!Web servisinden veri alma JSON ile

<!DOCTYPE html> 
<html> 
<head> 
<meta name="format-detection" content="telephone=no"> 
<meta name="msapplication-tap-highlight" content="no"> 
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"> 
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> 
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.css"> 
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $("#submit").click(function(){ 
     var url = "http://3920project.azurewebsites.net/api/activity/"; 
     //var email = "?email=" + getUrlVars(); 
     //var title = "?title=" + "girls"; 
     var title = "?title=" + getTitle(); 

     //alert(url + title); 
     $.getJSON(url + title) 
     // data: {title: $("#title").val() 
     .done(function(res) { 
      //alert("done"); 
      $.each(res, function(key, item) { 
       var colID = $('<td>', { 
       text: item.category 
       }); 
       var colName = $('<td>', { 
        text: item.day + item.to + item.from 
       }); 
       $('<tr>').append(colID, colName).appendTo($('#tblResult:last')); 
      }); //end of each() 
     }); //end of done() 
    }); //end of click() 
}); //end of ready() 
function getTitle() { 
    return document.getElementById('title').value; 
} 
</script> 

<style type="text/css"> 
    body { 
     font-family: arial; 
    } 

    th, 
    td { 
     margin: 0; 
     text-align: center; 
     border-collapse: collapse; 
     outline: 1px solid #e3e3e3; 
    } 

    td { 
     padding: 5px 10px; 
    } 

    th { 
     background: #666; 
     color: white; 
     padding: 5px 10px; 
    } 
    td:hover { 
     cursor: pointer; 
     background: #666; 
     color: white; 
    } 
</style> 
<title>Activity Search</title> 
</head> 

<body> 
<div class="app"> 
    Please enter activity: 
    <br></br> 
    <input type="text" id="title"> 
    <input type="submit" id="submit" value="Search" /> 
    <br></br> 
</div> 
<div> 
    <h2>Activity TimeTable</h2> 
    <table id="tblResult"> 
     <tr> 
      <th>Activity</th> 
      <th>Category</th> 
     </tr> 
    </table> 
</div> 
</body> 

</html>

kaynak

2016-03-22 mikotochan

js hatası için chrome dev tool ile kontrol ettiniz mi? – ItayB

"Res" inizi kontrol edin. Bu bir ip Nesne oluşturmak için 'JSON.parse (res)' işlevini kullanın – Wainage

Sınıf arkadaşımın benzer bir görevi var ve JSON.parse (res) kullanmadı ve onun işi iyi çalışıyor. Sorunumun .click işleviyle ilgisi olduğunu düşünüyorum çünkü kullanıcıdan gelen bir giriş gerektirmediğinden, kendisinden farklı şekilde yapılan birkaç şeyden biri. – mikotochan

Sözdizimi hatası var. Geliştirici konsolunuzu açarsanız (F12), Chrome'da uncaught SyntaxError: Unexpected Token) olduğunu görürsünüz. Yani bu noktadan önce bir şey yanlıştır.

Bu durumda, fazladan bir )'a sahip olmanız değil, tarayıcı getJSON()'un ardından aşağıdakileri nasıl okuyacağını anlamıyor. data: {title: $(#title").val()'u yorumladıysanız, derhal iyi derlenir.

Ayrıca sözdizimi hatalarını giderirken bazı kapatma etiketlerinizi de belgelemek isteyebilirsiniz.

$(document).ready(function() { 
    $("#submit").click(function(){ 
     var url = "http://3920project.azurewebsites.net/api/activity/"; 
    //var email = "?email=" + getUrlVars(); 
    //var title = "?title=" + "girls"; 
    var title = "?title=" + getTitle(); 

    //alert(url + title); 
    $.getJSON(url + title) 
    // data: {title: $("#title").val() 
    .done(function(res) { 
     //alert("done"); 
     $.each(res, function(key, item) { 
      var colID = $('<td>', { 
       text: item.category 
      }); 
      var colName = $('<td>', { 
       text: item.day + item.to + item.from 
      }); 
      $('<tr>').append(colID, colName).appendTo($('#tblResult:last')); 
     }); //end of each() 
    }); //end of done() 
    }); //end of click() 
}); //end of ready()

Güncelleme: kod yürürken bir sonraki adım getTitle() beraberdir. @blex, Başlık Kimliğine sahip bir öğeye sahip olmadığınız yorumlara dikkat çeker. Yani size girişinde title için activity den id değiştirdiğimize Şimdi stackoverflow.html:40 Uncaught TypeError: Cannot read property 'value' of null

Güncelleme konsol hata alıyorsanız, işler ancak XMLHttpRequest cannot load http://3920project.azurewebsites.net/api/activity/?title=test. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

konsol hata var, doğru teslim Bu, bir CORS sorununa sahip olduğunuz anlamına gelir (Cross Origin Resource Sharing). Here is an article to help understand that. Ya isteklerinizi yaparken doğru başlık bayraklarını ayarlamıyorsunuz veya sunucu, istekleri yapmak için alanınızı beyaz listeye eklemiyor.

kaynak

2016-03-22 20:15:21 EnigmaRM

Bu hattı yorumlamak için soruyu düzenledi. – Barmar

Oh. Tahmin etmeden önce cevabımı göndermeye başladım. Ayrıca başladığımda hiç bir cevap yoktu. Sanırım diğerlerinden daha yavaş yazıyorum, ha. – EnigmaRM

Kimlik sorununu çözdüm, ancak henüz çalışmıyor – mikotochan

Bu getJSON ifadenizdir. Nesne verisi: {title: $ ("# title"). Val() yerinde değil, bir kapanış eksiktir} ve aynı zamanda URL'ye başlık paramını eklediğinizde gereksizdir.

$.getJSON(url + title) 
    .done(function(res) { 
     //alert("done"); 
     $.each(res, function(key, item) { 
      var colID = $('<td>', { 
       text: item.category 
      }); 
      var colName = $('<td>', { 
       text: item.day + item.to + item.from 
      }); 
      $('<tr>').append(colID, colName).appendTo($('#tblResult:last')); 
     }); 
    });

kaynak

2016-03-22 20:09:18 Silkster

Bunu açıklamak için soruyu düzenledi. – Barmar

Bu hata - data: {title: $("#title").val(). Bunu kodunuzun içinde deneyin:

$("#submit").click(function(){ 
    var url = "http://3920project.azurewebsites.net/api/activity/"; 
    var title = "?title=" + getTitle(); 
    $.getJSON(url + title) 
    .done(function(res) { 
     // Your code here 
    }) 
    .fail(function(err){ 
     // check error 
    }); 
});

kaynak

2016-03-22 20:10:35 Alexander

Bunu açıklamak için soruyu yanıtladı. – Barmar

Web servisinden veri alma JSON ile

cevap

İlgili konular