Abrufen von Daten vom Web-Service mit JSON

Kann mir jemand sagen, was mit meinem Code nicht stimmt? Ich denke, es ist ein Syntaxfehler, weil ich Javascript/JSON nicht sehr gut kenne. Momentan tut dieser Code nichts. Dies ist für Schulprojekt; Meine Klasse baut eine App auf, die Benutzer verbindet, indem sie eine Schnittstelle zur Verfügung stellt, um Aktivitäten basierend auf Freizeit-/Stundenplan zu buchen. Vielen Dank!Abrufen von Daten vom Web-Service mit JSON

<!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>

Quelle

2016-03-22 mikotochan

Haben Sie mit Chrome-Dev-Tool für js Fehler überprüft? – ItayB

Überprüfen Sie Ihre 'res'. Es ist eine Schnur. Verwende 'JSON.parse (res)', um ein Objekt zu erstellen. – Wainage

Meine Klassenkameradin hat eine ähnliche Aufgabe und sie hat JSON.parse (res) nicht benutzt und ihr funktioniert gut. Ich denke, mein Problem hat mit der .click-Funktion zu tun, weil es eines der wenigen Dinge ist, die anders als ihrs gemacht werden, da ihre Eingaben vom Benutzer nicht benötigt werden. – mikotochan

Sie haben einen Syntaxfehler. Wenn Sie die Entwicklerkonsole (F12) öffnen, wird in Chrome uncaught SyntaxError: Unexpected Token) angezeigt. Da stimmt etwas nicht.

In diesem Fall ist es nicht, dass Sie eine zusätzliche ) haben, aber der Browser versteht nicht, wie folgt zu lesen, was folgt getJSON(). Wenn Sie data: {title: $(#title").val() auskommentieren, wird es gut kompilieren.

Sie können auch einige Ihrer schließenden Tags dokumentieren, wenn Sie versuchen, Syntaxfehler zu beheben.

$(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()

aktualisieren: Der nächste Schritt durch den Code in Fuß ist mit getTitle(). @blex weist in den Kommentaren darauf hin, dass Sie kein Element mit der Titel-ID haben. Sie sind also die Konsole Fehler von stackoverflow.html:40 Uncaught TypeError: Cannot read property 'value' of null

-Update bekommen Nun, da Sie die ID activity-title auf Ihrer Eingabe geändert haben, senden die Dinge richtig, aber die Konsole Fehler von 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. haben

Dies bedeutet, dass Sie ein CORS-Problem haben (Cross Origin Resource Sharing). Here is an article to help understand that. Entweder legen Sie nicht die richtigen Header-Flags für Ihre Anfragen fest, oder der Server hat Ihre Domain nicht auf die weiße Liste gesetzt, um die Anfragen zu stellen.

Quelle

2016-03-22 20:15:21 EnigmaRM

Er hat die Frage bearbeitet, um diese Zeile zu kommentieren. – Barmar

Oh. Ich schätze, ich habe meine Antwort geschrieben, bevor er das getan hat. Außerdem gab es keine Antworten, als ich anfing. Ich schätze, ich tippe langsamer als andere, ha. – EnigmaRM

Ich habe das ID-Problem behoben, aber es funktioniert noch nicht – mikotochan

Es ist Ihre Aussage getJSON. Die Objektdaten: {title: $ ("# title"). Val() ist fehl am Platz, es fehlt ein Closing) und auch redundant, da Sie den Titelparameter an die URL anhängen.

$.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')); 
     }); 
    });

Quelle

2016-03-22 20:09:18 Silkster

Er hat die Frage bearbeitet, um das zu kommentieren. – Barmar

Es ist falsch - data: {title: $("#title").val(). Versuchen Sie Folgendes in Ihrem Code:

$("#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 
    }); 
});

Quelle

2016-03-22 20:10:35 Alexander

Er hat die Frage bearbeitet, um das zu kommentieren. – Barmar

Abrufen von Daten vom Web-Service mit JSON

Antwort

Verwandte Themen