JSONを使用してWebサービスからデータを取得する

コードで何が問題なのか教えていただけますか？ Javascript/JSONに慣れていないので、構文エラーだと思います。現在、このコードは何もしません。これは学校プロジェクトのためのものです。私のクラスは、フリータイム/クラスのスケジュールに基づいてアクティビティを予約するためのインターフェイスを提供することによって、ユーザーをつなぐアプリケーションを構築しています。ありがとう！JSONを使用してWebサービスからデータを取得する

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

出典

2016-03-22 mikotochan

jsエラーのchrome devツールで確認しましたか？ – ItayB

あなたの 'res'を確認してください。それは文字列です。 'JSON.parse（res）'を使ってオブジェクトを作成する – Wainage

私のクラスメートは似たような仕事をしていて、JSON.parse（res）を使わず、彼女もうまくいきます。私は自分の問題が.click関数と関係していると考えています。なぜなら、彼女はユーザーからの入力を必要としないため、彼女とは異なる方法で行われる数少ない事の1つなのです。 – mikotochan

構文エラーがあります。デベロッパーコンソール（F12）を開くと、Chromeにuncaught SyntaxError: Unexpected Token)が表示されます。その前に何かが間違っています。

この場合、余分に)があるわけではありませんが、ブラウザは次の内容を読む方法を理解していませんgetJSON()。 data: {title: $(#title").val()をコメントアウトすると、うまくコンパイルされます。

構文エラーのトラブルシューティングを行うときに、終了タグの一部を文書化することもできます。

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

更新：コードを歩いての次のステップは、getTitle()です。 @blxは、タイトルにIDという要素を持たないコメントを指摘しています。だから、今、あなたの入力にactivityからtitleにIDを変更したこと、物事が正しく提出し、しかし、あなたは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.

のコンソールエラーを持っている更新stackoverflow.html:40 Uncaught TypeError: Cannot read property 'value' of null

のコンソールエラーを取得していますこれは、CORSの問題があることを意味します（Cross Origin Resource Sharing）。 Here is an article to help understand that。リクエストを行う際に正しいヘッダーフラグを設定していないか、サーバーが要求を行うためにドメインをホワイトリストに登録していません。

出典

2016-03-22 20:15:21 EnigmaRM

彼はその行をコメントするために質問を編集しました。 – Barmar

ああ。私は彼がそれをする前に私の答えを投稿し始めたと思う。また、私が始めたときに何の答えもありませんでした。私は他のものよりも遅くタイプすると思う。 – EnigmaRM

IDの問題を修正しましたが、まだ動作していません – mikotochan

getJSON文です。オブジェクトデータ：{title：$（ "＃title"）。val（）は場所が不明で閉じています}また、URLにタイトルパラメータを追加するので冗長です。

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

出典

2016-03-22 20:09:18 Silkster

彼はそれをコメントするために質問を編集しました。 – Barmar

間違っています - data: {title: $("#title").val()です。コード内で試してください：

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

出典

2016-03-22 20:10:35 Alexander

彼はそれをコメントするために質問を編集しました。 – Barmar

JSONを使用してWebサービスからデータを取得する

答えて

関連する問題