JS implementation is a text box (value is a parameter) Input another display (query result)

JS implementation is a text box (value is a parameter) Input another display (query result)

JS implementation is a text box (value is a parameter) Input another display (query result)

Recently, I encountered a problem in the project: "enter a number in a text box, and then query the corresponding name from the database and dynamically display it in another text box ."

When a text box loses its focus, it dynamically executes the corresponding method, detects data from the background, and then displays the data on the page. So what we need to do at this time is to use JS to write a text box to trigger the event. // W3School: http://www.w3school.com.cn/jquery/event_blur.asp (details about the loss of focus events)

<Scripttype = "text/javascript"> $ (document ). ready (function () {$ ("input "). focus (function () {// get focus event $ ("input" ).css ("background-color", "# FFFFCC") ;}); $ ("input "). blur (function () {// events with no focus $ ("input" ).css ("background-color", "# D6D6FF") ;}); </script>

With this Demo, we started to implement the functions we needed. In the Demo, we only implemented style modifications, and we needed to pass parameters to the Controller (MVC is used at the front end) and display the return value. The most common method found on the internet is ):

<Script type = "text/javascript" src = "jquery. js "$ amp;> amp; $ lt;/script> <script type =" text/javascript ">$ ('# test1 '). blur (function () {var parm = $ ('# test1 '). val (). trim (); $. post ("background operation URL", {'val ': parm}, function () {$ (' # test2 '). val (return data) ;}, return data type) ;}); </script>

I didn't call it at first because I didn't understand JQuery. I checked the information and found that this section I found on the Internet is actually a shorthand for the Section I wrote later (for details: http://www.w3school.com.cn/jquery/ajax_post.asp)

The last few modifications have successfully implemented the desired functions. The Code is as follows:

// Obtain the corresponding instructor name as the instructor number changes $ ('# EmployeeNo '). blur (function () {var strEmployeeNo = $ ('# EmployeeNo '). val (). trim (); $. ajax ({type: "post", async: true, // indicates asynchronous execution. synchronous Asynchronization is not a problem here. It is not clear about synchronization and Asynchronization. Url: "/OnClass/QueryTeacherNameByEmployeeNo", // method name data in Controller: {"strEmployeeNo": strEmployeeNo}, // parameter, the instructor ID success obtained from the foreground: function (data) {$ ('# teachername '). val (data); // display the instructor's name. The data is in Json format and only the instructor's name has one attribute. Therefore, you can directly use it. // Sometimes we need to convert json into a string. For the method, see the end of the article}, error: function (err) {alert ("the entered course code is incorrect, enter ") ;}}) ;}) again ");}});});

After writing it, it is actually a very simple thing. I spent some time doing it myself, but I am not very familiar with JS. At the same time, I am rarely familiar with JS, in addition, some materials on the Internet do not have standard comments (everyone has to write comments well). It seems to take time.

I hope everyone can share it with you!

Appendix:

Short implementation:

$('#CourseCode').blur(function() {        var jsonStr = "";        var strCourseCode = $('#CourseCode').val().trim();       $.post("/OnClass/QueryCourseNameByCourseCode", { 'strCourseCode': strCourseCode }, function (data) {            $('#CourseName').val(data);        });});

About Json and String Conversion:

String to object (strJSON represents a json string)
Var obj = eval (strJSON );
Var obj = strJSON. parseJSON ();
Var obj = JSON. parse (strJSON );
Convert a json object to a string (obj indicates a json object)
Var str = obj. toJSONString ();
Var str = JSON. stringify (obj)
Besides eval (), json. js packages are required for use (remember)