Question

我是javascript和ajax的新手，在使用正确的javascript代码将数据显示在HTML文档中时遇到了一些麻烦。我需要从HTML文档中显示特定Web地址的数据。有人能指出我正确的方向吗？

的application.js

function load_test(list_item) {
  var list = list_item.find('dl');
  var promise = $.ajax('http://www.ehustudent.co.uk/hallm/cis1007api/student-feedback/test' + list_item.data('id'));
  promise.done(function(data) {
  for(var idx = 0; idx < data.length; idx++) {
  list.append('<dt>' + data[idx].id + '</dt>');
  list.append('<dd>' + data[idx].studentnr + '</dd>');
  list.append('<dd>' + data[idx].name + '</dd>');
  list.append('<dd>' + data[idx].feedback + '</dd>');
    }
  });
}

的index.html

<html>
<head>
<link rel="stylesheet" href="style.css"/>
<script src="jquery.min.js"></script>
<script src="application.js"></script>
  </head>
  <body>
    <div class="row">
  <div class="column small-12">
    <h1>Feedback</h2>
      </div>
</div>
<ol class="feedback">
  <li class="row">
        <div class="column small-12 large-10">
      <h2>Student Name Goes Here</h2>
    </div>
    <div class="column small-12 large-2 text-right">
      <a href="#">(delete)</a>
    </div>
    <div class="column small-12">
      <p>Student Feedback Goes Here</p>
    </div>
  </li>
</ol>
    </ol>
<form id="add_feedback" action="#">
  <div class="row">
    <div class="column small-12 large-6">
      <label>Name
        <input type="text" name="name" placeholder="Enter your name here"/>
      </label>
    </div>
  </div>
  <div class="row">
    <div class="column small-12 large-6">
      <label>Feedback
        <textarea name="feedback" placeholder="Please provide some useful and constructive feedback"></textarea>
      </label>
    </div>
  </div>
  <div class="row">
    <div class="column small-12 large-6 text-right">
      <input type="submit" value="Add Feedback"/>
    </div>
  </div>
</form>

非常感谢任何帮助。谢谢！

Answer 1

试试这段代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
function load_test(list_item) {
  var list = list_item.find('li');
  var promise = $.ajax('http://www.ehustudent.co.uk/hallm/cis1007api/student-feedback/test' );
  promise.done(function(data) {
    console.log(data);
  for(var idx = 0; idx < data.length; idx++) {
  list.append('<dt>' + data[idx].id + '</dt>');
  list.append('<dd>' + data[idx].studentnr + '</dd>');
  list.append('<dd>' + data[idx].name + '</dd>');
  list.append('<dd>' + data[idx].feedback + '</dd>');
    }
  });
}
$(function(){
  load_test($('.feedback'));
});
</script>
</head>
  <body>
  <div class="row">
  <div class="column small-12">
    <h1>Feedback</h2>
      </div>
</div>
<ol class="feedback">
  <li class="row">
        <div class="column small-12 large-10">
      <h2>Student Name Goes Here</h2>
    </div>
    <div class="column small-12 large-2 text-right">
      <a href="#">(delete)</a>
    </div>
    <div class="column small-12">
      <p>Student Feedback Goes Here</p>
    </div>
  </li>
</ol>
<form id="add_feedback" action="#">
  <div class="row">
    <div class="column small-12 large-6">
      <label>Name
        <input type="text" name="name" placeholder="Enter your name here"/>
      </label>
    </div>
  </div>
  <div class="row">
    <div class="column small-12 large-6">
      <label>Feedback
        <textarea name="feedback" placeholder="Please provide some useful and constructive feedback"></textarea>
      </label>
    </div>
  </div>
  <div class="row">
    <div class="column small-12 large-6 text-right">
      <input type="button" onclick="tex" value="Add Feedback"/>
    </div>
  </div>
</form>
</body>
</html>

Answer 2

HTML + Javascript代码中有错误： HTML：必须将其删除

JavsSctipt：

您的HTML
[list_item.data（＆＃39; id＆＃39;）]此代码返回未定义的值，因此您的网址不能正常工作，您必须获得正确的ID。
您没有调用您的函数[load_test]，因此无法看到结果

使用Ajax从特定URL加载数据

2 个答案: