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包(切记) 


目录
相关文章
|
3天前
|
前端开发 JavaScript
【实现js和css互通、共享常量参数值】js如何获取CSS/SCSS/LESS的常量、CSS/SCSS/LESS又是如何获取js的值(或者说js是如何主动推送参数给CSS使用的)?
【实现js和css互通、共享常量参数值】js如何获取CSS/SCSS/LESS的常量、CSS/SCSS/LESS又是如何获取js的值(或者说js是如何主动推送参数给CSS使用的)?
|
1天前
|
移动开发 前端开发 JavaScript
Vue2 系列:vue.config.js 参数配置
Vue2 系列:vue.config.js 参数配置
11 2
|
3天前
|
JavaScript
如何在JS中实现修改URL参数而不刷新页面
如何在JS中实现修改URL参数而不刷新页面
|
3天前
|
JavaScript 前端开发
【专栏】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表
【4月更文挑战第29天】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表。它接受两个参数:上下文对象和参数数组。理解`apply`有助于深入JS运行机制。文章分三部分探讨其原理:基本概念和用法、工作原理详解、实际应用与注意事项。在应用中要注意性能、参数类型和兼容性问题。`apply`可用于动态改变上下文、传递参数数组,甚至模拟其他语言的调用方式。通过深入理解`apply`,能提升代码质量和效率。
|
3天前
|
存储 JavaScript 前端开发
每日一道javascript面试题(九)函数的参数可以和函数体中的变量重名吗
每日一道javascript面试题(九)函数的参数可以和函数体中的变量重名吗
|
3天前
|
存储 JavaScript 前端开发
js原生方法,获取url上面所有参数,并返回一个对象
JavaScript函数`getUrlParameters`用于从URL中提取所有参数并返回一个键值对对象。它接收URL,分割查询字符串,解码参数对,并存储在对象中。重复参数键会被存储为数组。
|
3天前
|
JavaScript
js如何实现修改URL参数并不刷新页面
js如何实现修改URL参数并不刷新页面
|
3天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
3天前
|
JavaScript 前端开发
为 setTimeout 或 setInterval 提供一个字符串作为第一个参数(js的问题)
为 setTimeout 或 setInterval 提供一个字符串作为第一个参数(js的问题)
11 0
|
3天前
|
JavaScript 前端开发 UED
如何在JS中实现修改URL参数而不刷新页面
如何在JS中实现修改URL参数而不刷新页面
58 2