Question

有人可以告诉我我的代码有什么问题吗？我认为这是一个语法错误，因为我对Javascript / 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>

Answer 1

这是你的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'));
        });
    });

Answer 2

这不正确 - 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
    });
});

Answer 3

您的语法错误。如果您打开开发人员控制台（F12），则会在Chrome中看到public class ItemInflector implements Inflector<ContainerRequestContext, String> { .... }。所以在那之前出了点问题。

在这种情况下，并不是您有额外的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()。 @blex在评论中指出你没有一个ID为Title的元素。所以你得到了getTitle()

的控制台错误

<强>更新既然您已在输入中将ID从stackoverflow.html:40 Uncaught TypeError: Cannot read property 'value' of null更改为activity，那么事情就会正确提交，但是您的控制台错误为title

这意味着您有一个CORS问题（跨源资源共享）。 Here is an article to help understand that。您在提出请求时没有设置正确的标题标记，或者服务器未将您的域列入白名单以发出请求。

使用JSON从Web服务获取数据

3 个答案: