Extjs4.2: three methods of Ajax data submission, 80% people have never used the third method.

ArticleDirectory

• Sample Code
• Execution result
• Server code
• Sample Code
• Execution result
• Server code
• Sample Code
• Execution result
• Server code
• Code configured as the first method
• Code configured as the second method
• Code configured as the third method

References

HTTP: https://zh.wikipedia.org/wiki/HTTP

Mime: https://zh.wikipedia.org/wiki/MIME

Domestic blog: http://blog.csdn.net/gueter/article/details/1524447

Example 1 Code

 
1 var DATA = {2 Name: 'duan Guangwei ', 3 Email: 'shijiucha @ QQ.com' 4}; 5 6 Ext. ajax. request ({7 URL :'.. /handlers/getdata. ashx ', 8 method: 'get', 9 Params: {users: ext. encode (data)} 10 });
 

Execution result

Server code

 
1 context. response. Write (context. Request. querystring ["users"]);
 

Method 2 Sample Code

 
1 var DATA = {2 Name: 'duan Guangwei ', 3 Email: 'shijiucha @ QQ.com' 4}; 5 6 Ext. ajax. request ({7 URL :'.. /handlers/getdata. ashx ', 8 method: 'post', 9 Params: {users: ext. encode (data)} 10 });
 

Execution result

Server code

 
1 context. response. Write (context. Request. Form ["users"]);
 

Method 3 sample code

 
1 var DATA = {2 Name: 'duan Guangwei ', 3 Email: 'shijiucha @ QQ.com' 4}; 5 6 Ext. ajax. request ({7 URL :'.. /handlers/getdata. ashx ', 8 method: 'post', 9 jsondata: data10 });
 

Execution result

Server code

 
1 streamreader sr = new streamreader (context. Request. inputstream); 2 context. response. Write (Sr. readtoend ());
 

In extjs, configure proxy as the first method of code

1 Ext. define ('demo. model. user', {2 extend: 'ext. data. model ', 3 fields: [4 {Name: 'name'}, 5 {Name: 'email'} 6], 7 Proxy: {8 Type: 'ajax ', 9 API: {10 create :'.. /handlers/getdata. ashx '11}, 12 actionmethods: {13 create: 'get', 14 read: 'get', 15 update: 'get', 16 destroy: 'get' 17 }, 18 reader: {19 type: 'json', 20 root: 'users' 21}, 22 Writer: {23 type: 'json', 24 encode: True, 25 root: 'users' 26} 27} 28 });
 

Code configured as the second method

1 Ext. define ('demo. model. user', {2 extend: 'ext. data. model ', 3 fields: [4 {Name: 'name'}, 5 {Name: 'email'} 6], 7 Proxy: {8 Type: 'ajax ', 9 API: {10 create :'.. /handlers/getdata. ashx '11}, 12 reader: {13 type: 'json', 14 root: 'users' 15}, 16 Writer: {17 type: 'json', 18 encode: true, 19 root: 'users' 20} 21} 22 });
 

Code configured as the third method

 
1 Ext. define ('demo. model. user', {2 extend: 'ext. data. model ', 3 fields: [4 {Name: 'name'}, 5 {Name: 'email'} 6], 7 Proxy: {8 Type: 'ajax ', 9 API: {10 create :'.. /handlers/getdata. ashx '11}, 12 reader: {13 type: 'json', 14 root: 'users' 15} 16} 17 });
 

Remarks

I have not summarized the usage scenarios of the three methods. Please give me some suggestions. My general idea is this.

• Get data: if the first type is used less than the first type, otherwise the second type is used. Browser restrictions.
• Send data: Use the second method if the data volume is small; otherwise, use the third method. Browser restrictions.