jQuery/ajax data container + организация

Question

Мой отец и я работаем над проектом, в котором мы хотели бы создать скрипт, который вызывает данные, когда число передается в форму. Например, когда вы вводите свой идентификационный номер, нажмите ENTER или SUBMIT, форма будет печатать/отображать информацию. Это проект для школы, поэтому, когда студент отправляет свой идентификационный номер, он, например, будет читать свой первый класс периода.

У меня есть следующий код сценария, чтобы настроить форму:

<form id="firstPeriod" action="firstPeriod.html"> 
    <p>Find your first period.</p> 
    <p><label>Student no.: <input type="text" name="studentNo"></label></p> 
    <p><input type="submit" value="Find it"></p> 
    <p id="result"></p> 
</form> 

<script type="text/javascript"> 
$(function() { 
    $('#firstPeriod').submit(function() { 
     $.ajax({ // Send the request behind the scenes 
       url: $(this).attr('action'), // Send it here 
       data: $(this).serialize(), // With this student no. 
       success: function(data) { 
        $('#result').html(data); // Display the resulting HTML 
       }, 
       error: function(jqxhr, status, error) { 
        console.log(error); 
        $('#result').html('No results found. Please check your number and reenter'); // Notify an error 
       } 
     }); 
     return false; // Prevent the normal form submission 
    }); 

});

Мой вопрос в том, что было бы лучшим способом организовать данные? Массив, HTML и т. Д.? Существует довольно много идентификационных номеров и в настоящее время настроено в таблице HTML, но это не работает при вызове информации. И я хотел бы, чтобы данные были конкретными. Поэтому, когда вводится конкретный идентификационный номер, он читает конкретный ответ. Сейчас проблема заключается в том, что я набираю число, которое читает несколько классов.

Если есть какие-либо предложения/советы/другие сообщения, которые могли бы мне помочь, я был бы вам признателен. У меня есть хороший опыт работы с HTML, CSS, но я все еще изучаю JS и jQuery, поэтому для меня это немного ново. Благодаря!

Answer 1

Редактировать, Обновлено

Примечание, добавлена ​​value атрибут input type="text" элемент

<input type="text" name="studentNo" value="" /> 

замещенные .submit() для .on("click") на input type="submit" элемента

---

два возможных подхода может быть: 1) с помощью HTML к хранить данные, .load() для извлечения идентификатора фрагмента в файле html; или 2) хранения данных с использованием JSON, извлечения файла с использованием php

HTML в firstPeriod.html

<div id="0">data 0</div><div id="1">data 1</div> 

JavaScript

$(function() { 
    var form = $("#firstPeriod"); 
    $("input[type=submit]").on("click", function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    var data = form.serializeArray(); 
    // where `data[0].value` is `id`; e.g.; `0` 
    var id = data[0].value;   
    $("#result").load(form.attr("action") +" #"+ id) 
    }) 
}) 

plnkr http://plnkr.co/edit/4onHf9jlJTyDei1zo9IC?p=preview

---

JSON

0.json

{ 
    "0":"<div id='0'>data 0</div>" 
    } 

1.json

{ 
    "1":"<div id='1'>data 1</div>" 
    } 

Javascript

$(function() { 
    var form = $("#firstPeriod"); 
    $("input[type=submit]").on("click", function(event) { 
     event.preventDefault(); 
     event.stopPropagation(); 
     var data = form.serializeArray(); 
     // where `data[0].value` is `id`; e.g.; `0` 
     var id = data[0].value;   
     $.post("data.php", {id:id}, function(result) { 
     $("#result").html(result[id]) 
     }, "json") 
    }) 
    }) 

PHP

<?php 
    if (isset($_POST["id"])) { 
    $id = $_POST["id"]; 
    $file = $id . ".json"; 
    if (file_exists($file)) { 
     $jsondata = file_get_contents($file); 
     $id_data = json_decode($jsondata, true); 
     echo json_encode($id_data); 
    }; 
    }