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


目录
相关文章
|
2月前
|
前端开发
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
用html+javascript打造公文一键排版系统3:获取参数设置、公文标题排版
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-函数的参数
关于JavaScript函数参数基础知识的介绍。
24 4
JavaScript基础知识-函数的参数
|
2月前
|
JavaScript 前端开发
JavaScript 函数参数
JavaScript 函数参数
26 3
|
2月前
|
前端开发 JavaScript
前端JS截取url上的参数
文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。
43 0
|
3月前
|
SQL JavaScript 前端开发
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
【Azure 应用服务】Azure JS Function 异步方法中执行SQL查询后,Callback函数中日志无法输出问题
|
3月前
|
JavaScript 前端开发
使用js对文本框设置字数限制
使用js对文本框设置字数限制
60 0
|
4月前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
56 1
|
4月前
|
存储 资源调度 前端开发
JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
使用 Axios 发送包含 Base64 数据和其他参数的 POST 请求时,可以通过 `onUploadProgress` 监听上传进度。由于整个请求体被视为一个单元,所以进度可能不够精确,但可以模拟进度反馈。前端示例代码展示如何创建一个包含 Base64 图片数据和额外参数的 `FormData` 对象,并在上传时更新进度条。后端使用如 Express 和 Multer 可处理 Base64 数据。注意,实际进度可能不如文件上传精确,显示简单加载状态可能更合适。
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的公共交通查询系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的公共交通查询系统附带文章源码部署视频讲解等
34 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的城市公交查询系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的城市公交查询系统附带文章源码部署视频讲解等
25 0