First, describe the problem scenario : We're doing a car rental project, using maven + ssm + easyui be done, the problem is to do car rental business apply when arise.
Problem Description : When you send an asynchronous request using ajax, encountered a problem that receives the asynchronous response data in the callback function, but form the front page is not echoed in the data.
See the following code in question :
1 / * handle rental business * / 2 function rentCars (value) { . 3 / * Get the selected row * / . 4 var Row = $ ( "# dgCarRents") DataGrid ( "the getSelected." ); . 5 IF (Row) { . 6 = URL "saveRents" ; . 7 / * Clear form data * / . 8 $ ( "# FM") form ( 'Clear'. ); . 9 / * prohibit the text box below * / 10 $ ( "# rentid" ) .textbox ( 'TextBox') attr ( 'Readonly',. to true ); . 11 $ ( "#. price") TextBox ( 'TextBox') attr ( 'Readonly',.. to true ); 12 is $ ( "# ident") TextBox ( 'TextBox') attr ( 'Readonly',.. to true ); 13 is $ ( "# carnumber") TextBox ( 'TextBox') attr ( 'Readonly',.. to true ); 14 $ ( "# opername") TextBox ( 'TextBox') attr ( 'Readonly',.. to true ); 15 / * asynchronous submitted to the background, to obtain data * / 16 $ .post ( 'genRentCode',function (Data) { . 17 / * load data to form the form * / 18 is / * $ ( "# FM") form ( 'Load', Data);. * / . 19 Row [ 'rentid'] = data.rentid; 20 is Row [ 'opername'] = data.opername; 21 is / * $ ( "# FM") form ( 'Load', Row);. * / 22 is }); 23 is / * the ID number placed in row * / 24 row [ 'Identity'] = $ ( "# Identity" ) .val (); 25 / * open dialog * / 26 is $ ( "# dlgRentCar") dialog. ( 'open') dialog ( ' setTitle', ' apply rental'. ); 27 / * data json objects are loaded to form row * / 28 . $ ( "# FM") form ( 'load',row); 29 } 30 }
Please note here:
The front page displays:
It found that only identity corresponding to the data, while opername and rentid corresponding data did not show, but I obviously have the last line of the function of all data json objects row are all loaded into the form, but the form Why not show it? With this question, I tried it the teacher's method:
Note: This background data directly loaded directly to the form, the asynchronous response back json object data key (key) value must be the same with the value of the name attribute Chinese form corresponding to the present block, otherwise the data can not be loaded form.
Front page:
rentid and opername all load out.
Problem Analysis: 1 start, my callback function, only to json object assignment statement; 2 no code data is loaded into the form in the callback function; 3 I send asynchronous requests, that is... He said dialog form is asynchronous response arrives before the echo of the data.
Concluded: After reaching the asynchronous response (in this case, asynchronous response after the form is echoed complete data arrives), you need to re-load the data into the form form.
If you do not understand, then in addition to the above wording also can write:
This method is also possible, see it, the teacher is a direct response to the asynchronous load data back to the form so the problem will not arise, but I actually think trying assignment method to load data into a form, but not in the callback function the addition of asynchronous data loading response back to the form of the code, but only to the assignment statement json object, although I came back at the end of the asynchronous response data is loaded to the form, but this result is that: the dialog form only loading the data returned in response to a non-asynchronous , and asynchronous response back the data because it is asynchronous, after the completion of the form echo data, asynchronous data was sent back in response to the front end, an object row JSON assignment was received, if at this time not again to load data into a form, the form in which asynchronous data will not respond back.
再次总结一下前端获取数据的过程：前端页面在 第一次加载数据的同时 发送异步请求，但是 这个 异步响应 是在 页面加载完数据之后 到达的，因此在 异步响应 到达之后（这时表单数据已加载完毕） 需要第二次将数据加载到表单中（将 异步响应回来的数据 加载至表单）。