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


目录
相关文章
|
1月前
egg.js 24.18参数验证
egg.js 24.18参数验证
29 0
egg.js 24.18参数验证
|
3月前
|
JavaScript
如何在JS中实现修改URL参数而不刷新页面
如何在JS中实现修改URL参数而不刷新页面
59 1
|
1月前
|
JavaScript 前端开发 API
js截取图片地址后面的参数和在路径中截取文件名或后缀名
在处理网页上的图片资源或者其他类型的文件资源时,你可能会遇到需要使用这些技巧的情况。以下是一些具体的使用场景:
15 0
|
11天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
|
16天前
|
JavaScript 前端开发
为 setTimeout 或 setInterval 提供一个字符串作为第一个参数(js的问题)
为 setTimeout 或 setInterval 提供一个字符串作为第一个参数(js的问题)
|
26天前
|
JavaScript
js开发:请解释什么是ES6的默认参数(default parameters),并给出一个示例。
ES6允许在函数参数中设置默认值,如`function greet(name = &#39;World&#39;) {...}`。当调用函数不传入`name`参数时,它将默认为&#39;World&#39;,提升代码简洁性和可读性。例如:`greet()`输出&quot;Hello, World!&quot;,`greet(&#39;Alice&#39;)`输出&quot;Hello, Alice!&quot;。
15 4
|
1月前
|
前端开发 JavaScript
|
1月前
|
JavaScript
JS动态参数arguments与剩余参数
JS动态参数arguments与剩余参数
|
3月前
|
移动开发 JavaScript 前端开发
纯JS写一个用苹果序列号查询生产信息的小工具
纯JS写一个用苹果序列号查询生产信息的小工具
15 0
|
3月前
|
存储 JavaScript 前端开发
JavaScript:箭头函数&剩余参数
JavaScript:箭头函数&剩余参数
33 0