jQuery/ajax數據容器+組織

Question

我和我父親正在研究一個項目，我們希望創建一個腳本，在將數字提交到表單中時調用數據。例如，當您輸入您的ID號碼，然後按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表格中設置，但這似乎不起作用調用信息。我希望數據具體。所以當輸入一個特定的ID號時，它會讀取一個特定的答案。現在我的問題是，當我輸入一個數字時，它會讀取幾個類。

如果有任何建議/建議/其他職位可以幫助我，我會很感激。我有紮實的HTML，CSS體驗，但我仍然在學習JS和jQuery，所以這對我來說有點新。謝謝！

Answer 1

編輯，更新

筆記，加入value屬性input type="text"元件

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

使用HTML在input type="submit"元素取代.submit()爲.on("click")

---

兩種可能的方法可以是1）存儲數據，​​在html文件內檢索片段標識符;或2）使用存儲數據JSON，在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檢索使用php

HTML文件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); 
    }; 
    }