Question

我有html文件和JSON文件。在html文件中，我创建了带按钮的文本框，以便用户输入课程名称。在JSON中，我有一系列课程对象包含有关课程的一些信息。我想在用户输入一个课程并使用jQuery时使用Ajax，它应该在json中循环数组以检查是否找到了这个值。如果找到，则显示本课程的详细信息。这是我的尝试。

＆＃13;

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>

<head>
  <title>Finding Course Details</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $('#btn').click(function() {
        var result = $('#div1');
        result.html('');
        var data1 = $('#text1').val();
        $.ajax({
          url: 'course.json',
          method: 'get',
          data: data1,
          dataType: 'json',
          success: function(response) {

            result.html('level: ' + response.course[0].level + '<br/>' + 'Theoretical hours :' + response.course[0].Theoretical + '<br/>' + 'Practical hours :' + response.course[0].Practical);
          }
        });
      });
    });
  </script>
  <style>
    div.container {
      width: 100%;
      border: 1px solid gray;
    }
    header,
    footer {
      padding: 1em;
      color: black;
      background-color: white;
      clear: left;
      text-align: center;
    }
    nav {
      float: left;
      max-width: 160px;
      margin: 0;
      padding: 1em;
    }
    a:hover {
      color: blue;
      background-color: transparent;
      text-decoration: underline
    }
    nav ul {
      list-style-type: none;
      padding: 0;
    }
    nav ul a {
      text-decoration: none;
    }
    article {
      margin-left: 170px;
      border-left: 1px solid gray;
      padding: 1em;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="container">

    <header>
      <img src="9.jpg" width="300" height="200" alt="">
    </header>

    <nav>
      <ul>
        <li><a href="#">Main</a>
        </li>
        <li><a href="#">Courses</a>
        </li>
      </ul>
    </nav>

    <article>
      <h1>Course Details</h1>
      <form>
        Enter Course Name :
        <br/>

        <input type="text" id="text1">
        <input type="button" id="btn" value="Get Course Details">
        <br/>
      </form>
      <div id="div1"></div>
    </article>

    <footer>B</footer>

  </div>
</body>

</html>

＆＃13;

这是json代码：

＆＃13;

{
  "course" : [
    {
      "name":"Computer Programming",
      "level" : "level 1",
      "Theoretical" : "4",
      "Practical" : "2"
    },
    {
      "name":"Web Technologies",
      "level" : "level 2",
      "Theoretical" : "2",
      "Practical" : "2"
    },
    {
      "name":"Project",
      "level" : "level 4",
      "Theoretical" : "2",
      "Practical" : "2"
    }
  ]
}

＆＃13;

Answer 1

使用$ .grep

按用户输入的数据获取特定的json

var data = {
    "items": [{
        "id": 1,
        "category": "cat1"
    }, {
        "id": 2,
        "category": "cat2"
    }, {
        "id": 3,
        "category": "cat1"
    }]
};

var returnedData = $.grep(data.items, function (element, index) {
    return element.id == 1;
});


alert(returnedData[0].id + "  " + returnedData[0].category);

Answer 2

Vanilla JavaScript解决方案：

VARCHAR

获取在文本框中输入的特定json对象数组

2 个答案: