JS實現是一個文字框（值為參數）輸入另一個顯示（查詢結果）

JS實現是一個文字框（值為參數）輸入另一個顯示（查詢結果）

JS實現是一個文字框（值為參數）輸入另一個顯示（查詢結果）

最近在項目當中遇到了這麼一個問題：“在一個文字框中輸入編號,然後從資料庫中查詢對應的名稱動態顯示在另一個文字框中。”

當一個文字框失去焦點的時候就動態執行相應的方法，從後台查出資料然後顯示在頁面上。所以這個時候需要做的就是用JS寫一個文字框觸發事件。//W3School：http://www.w3school.com.cn/jquery/event_blur.asp（關於失去焦時間點事件詳解）

<scripttype="text/javascript">        $(document).ready(function(){          $("input").focus(function(){       //獲得焦時間點事件                   $("input").css("background-color","#FFFFCC");          });          $("input").blur(function(){        //失去焦時間點事件                   $("input").css("background-color","#D6D6FF");          });});</script> 

有了這個小Demo之後就開始著手實現自己需要的功能了，Demo中實現的只是樣式的修改，而自己需要傳參數調取Controller（前台使用的是MVC）並將返回值顯示出來。在網上查到的最多的是如下方法（自己沒有調通）：

<script type="text/javascript"src="jquery.js"$amp;>amp;$lt;/script><script type="text/javascript">        $('#test1').blur(function(){        var parm = $('#test1').val().trim();        $.post("後台操作URL",{'val':parm},function(){                $('#test2').val(返回資料);        },返回資料類型);});</script>

最初沒有調通是因為自己對JQuery的不理解，通過自己查了查資料發現網上找到的這段其實是我後來寫的那段的簡寫（詳細參考：http://www.w3school.com.cn/jquery/ajax_post.asp）

最後幾經修改成功的實現了自己想要的功能，代碼如下：

 //隨教工號的變化得到相應的教師名稱    $('#EmployeeNo').blur(function () {        var strEmployeeNo = $('#EmployeeNo').val().trim();        $.ajax({            type: "post",          async: true,//表示非同步執行；這裡同步非同步都是沒有問題的，關於同步和非同步自己目前還不是很清楚。            url: "/OnClass/QueryTeacherNameByEmployeeNo", //Controller中的方法名            data: { "strEmployeeNo": strEmployeeNo },     //參數，從前台擷取的教工號            success: function(data) {                $('#TeacherName').val(data);        //顯示教師的名字，data為Json，裡面只有教師名一個屬性故可以直接使用。              //有時候我們需要將json轉化成字串，方法見文尾            },            error: function(err) {                alert("輸入的課程編碼有誤，請重新輸入");            }        });});

最後寫完之後其實是一個很簡單的東西，自己做的時候花了一些時間主要還是對JS這塊不是很熟悉，同時在平時用得也比較少比較生疏，再者網上一些資料並沒有很規範的注釋（大家都得好好寫注釋啊）看起來也需要花時間。

希望大家都能用心分享！

附錄：

簡寫實現：

$('#CourseCode').blur(function() {        var jsonStr = "";        var strCourseCode = $('#CourseCode').val().trim();       $.post("/OnClass/QueryCourseNameByCourseCode", { 'strCourseCode': strCourseCode }, function (data) {            $('#CourseName').val(data);        });});

關於Json和字串的轉換：

字串轉對象(strJSON代表json字串)
var obj = eval(strJSON);
var obj = strJSON.parseJSON();
var obj = JSON.parse(strJSON)；
json對象轉字串(obj代表json對象)
var str = obj.toJSONString();
var str = JSON.stringify(obj)
運用時候需要除了eval()以外需要json.js包（切記）