开发者社区> codyl> 正文

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


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Redis命令:scan实现模糊查询
Redis命令:scan实现模糊查询
2323 0
文本框输入邮箱自动联想补全
文本框输入邮箱自动联想补全 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; &lt;meta http-equiv="content-type" cont
2819 0
OSS实时日志查询——访问记录秒级查询与可视化分析
OSS新发布“OSS访问日志实时查询”,用户可在OSS控制台,对OSS访问日志,进行可视化的实时查询与分析统计。该功能可简化用户对OSS访问记录的审计、统计、事件回溯、运维分析、问题定位等工作,提升运维效率,挖掘日志数据价值,提高基于数据的决策能力,助力业务发展。
2574 0
修复ie文本框不能输入文字
打开网页后.在文本框中无法输入文字.并且点鼠标右键也不好用. 原因:修复恶意插件后.破坏了IE内文件. 解决办法:从正常的机器上拷贝c:\windows\system32\mshtmled.dll到本机的system32目录下即可。
621 0
Android图形显示系统——上层显示2:硬件加速实现
Android界面绘制的硬件加速实现 Android的界面绘制的硬件加速采取上下整合的一套流程实现 一、代码结构 (一)Java HardwareRenderer-&gt;ThreadedRenderer:组织硬件加速渲染的类,下发创建显示列表和回放的指令。 GLES20RecordngCanvas GLES20Canvas HardWareCanvas:与
4304 0
Java之键盘输入语句Scanner
Java之键盘输入语句Scanner
106 0
+关注
codyl
make it possible
86
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载