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包（切记）