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

时间: 2024-09-19 09:53:54

JS实现是一个文本框(值为参数)输入另一个显示(查询结果)的相关文章

JS如何实现只改变一个文本框的值,就能自动改变一列的值?救命啊。

问题描述 有一个下拉列表,其后跟着一个文本框.下面是一个表格,其中有两列,A列是TD,B列是textbox,要求是,如果上边的下拉列表中选择的值等于A列的值的话,上边的文本框中输入的值就自动加到,对应其后的B列中,如果B列中原先有值的话,就覆盖掉.关键是多个不连续相等的情况,如何处理啊.难死我啦.各位高手拜托指导一二.感激不尽啊!!! 解决方案 解决方案二:A列是TD,B列是textbox--->B列是textbox这一列肯定在一个td里的吧.这个逻辑你自己都写出来的呀,还要怎么做呀,不连续的值

ava cript-js实现动态的给某一个文本框赋值,赋三个文本框值到这个里面

问题描述 js实现动态的给某一个文本框赋值,赋三个文本框值到这个里面 我要把门数,座位数,车身形式值取出,赋值给车身结构,我该怎么样动态的给它赋值,主要是怎么样写方法,在那个里面写什么方法,才能实现这个 解决方案 $("#元素id).val JavaScript是getelementbyid 解决方案二: $("#id值").val("赋值"); 解决方案三: getelementbyid(#id ).text = "xxxxxx";

jsp-JSP包含一个下拉框和一个文本框,如何根据下拉框的值判断文本框是否必填?

问题描述 JSP包含一个下拉框和一个文本框,如何根据下拉框的值判断文本框是否必填? 如题,下拉框有1,2,3,4,5 五个选项,怎么判断下拉框的值,让选择1选项的时候必须填文本框的值,否则不必填.需要在JSP页面上实现. 解决方案 服务器端和客户端都要验证一遍.. <form method="post" onsubmit="return check(this)"> <select name="tp"><option

jsp怎么根据文本框的值来查询数据库并把相应内容显示到另一个文本框中

问题描述 jsp怎么根据文本框的值来查询数据库并把相应内容显示到另一个文本框中 解决方案 url: path+"/operStat/baseInfoData", 楼上这里的查询访问的地址,这时如果是MVC模式的话,还要在controller层中写写一个查询数据库的方法,然后根据前台前过来的查询条件data:{"deviceCode":port},来进行查询,并将结果返回.前台自动对应返回的结果到相关的框框中去. 解决方案二: 补充一下责任部门在数据库中是数字,只有i

javascript-在js中 如何用Jquery 获取一个文本框中的值 文本框中ID=A

问题描述 在js中 如何用Jquery 获取一个文本框中的值 文本框中ID=A 在js中 如何用Jquery 获取一个文本框中的值 文本框的ID=a 解决方案 $("#a").val()就是获取ID=A 的input的value值 解决方案二: $("#A").val() 解决方案三: js与jQuery获取文本框的值js获取文本框值JS获取文本框的值----------------------

JS对文本框值的判断示例

 JS判断只能是数字和小数点,下面为大家介绍下使用JS对文本框值的判断,需要的朋友可以参考下 JS判断只能是数字和小数点(摘录自其它资料,在此发表只为个人以后使用查找方便)    1.文本框只能输入数字(不包括小数点)    <input onkeyup="this.value=this.value.replace(/D/g,'')" onafterpaste="this.value=this.value.replace(/D/g,'')">    2.

用jquery验证js里面的一个文本框 字符长度不能超过 10个数

问题描述 用jquery验证js里面的一个文本框 字符长度不能超过 10个数 用jquery验证js里面的一个文本框 字符长度不能超过 10个数 除了用$("#A").val().length>10之外还能怎么判断? 解决方案 我觉得,如果只是长度限制的话,完全可以不用js.你直接只用文本框里面的maxlength长度限制标签;例如: 解决方案二: <input name="A" type="text" id="A"

asp.net分页,用一个文本框输入页面,按钮跳转到指定的分页的页面

问题描述 datalist已经查询出结果,asp.net分页已写好,用一个文本框输入页面,按钮跳转到指定的分页的页面,分页已经写好,就是不知道怎么在文文本框输入页面后跳转到指定的分页的页面,请各位给个思路 解决方案 解决方案二:傳入參數pageIndex重新執行sql語句綁定到datalist解决方案三:传入参数是指,页面跳转的时候把参数带上吗?我要跳转到本页面的,参数怎么弄呢?解决方案四:文文本框输入页面后跳转到指定的分页的页面?在跳转按钮或者链接里面想跳转到:<inputid=p><

js实现仿Discuz文本框弹出层效果_javascript技巧

本文实例讲述了js实现仿Discuz文本框弹出层效果.分享给大家供大家参考.具体如下: 这是一个在经典论坛曾经热讨论的问题,记得在QQ邮箱里也有类似功能,Discuz7.0论坛里同样也有,当你的鼠标单击文本框的时候,会弹出一个包含文字.图片.表单无素的DIV层,里面的元素都可以进行操作,很方便,选中的值会自动添加到文本框内.本代码经过了多次修正,没有进行过多美化,你美工好的话可以自己美化. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//D