Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the important knowledge points of Ajax". In the daily operation, I believe that many people have doubts about the important knowledge points of Ajax. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what are the important knowledge points of Ajax?" Next, please follow the editor to study!

Part one: an introduction to JSON

JSON / / define a JSON object var obj = {"class": "data structure", "name": 66, "student": 65}; / / readable console.log (obj); console.log (obj.class); / / writable line obj.student = "excellent students"; console.log (obj.student); console.log (typeof obj) / / object is a json object / / JSON traverses for (var key in obj) {console.log (key + ":" + obj [key]);} / / JSON object to string var obj1 = JSON.stringify (obj); console.log (typeof obj1); / / string / / string to JSON object var obj2 = JSON.parse (obj1); console.log (typeof obj2) / / object effect display:

Part two: interaction before and after 1. Here are two ways to interact before and after: (1) use the name attribute in the form form for front-end interaction.

One:

Tips:

Import tornado.web

Check its source code: 26-38 behavior tornado version of hello world, just take it and change it.

HTML code: before and after interaction-- form form user name:

Secret   code:

Python code: import tornado.webimport tornado.ioloopimport tornado.webclass MainHandler (tornado.web.RequestHandler): def get (self): self.render ("Ajax_form.html") # the path to the HTML file that needs to interact back and forth def post (self, * args) * * kwargs): # whether to use post or get here depends on the method attribute of the form form in the HTML file (both are the same) # View by printing on the console Did you successfully get the information from the front end print (self.get_argument ("user")) #. Get_argument () gets a single parameter, which is the property value of the name attribute in the form form. Print (self.get_argument ("pwd")) self.write ("submitted successfully!") If _ _ name__ = = "_ main__": application = tornado.web.Application ([(r "/", MainHandler), # needs to be the same as the action in the form form. ]) application.listen (8888) # port number tornado.ioloop.IOLoop.current () .start ()

Expand:

If you report an error: NotImplementedError

See this article: https://blog.csdn.net/hank5658/article/details/106870245

How to achieve:

First: run the .py file

After no error is reported, run the HTML file

Then change the address bar of the front-end interface to: 127.0.0.1Suzhou 8888 and enter

If no error is reported, the forwarding is successful.

Finally, enter the user name and password and click the submit button to display the user name and password in the pycharm console.

Effect display:

(2) use AJAX for front-and back-end interaction

Ajax function?

Front-end interaction using form forms (traditional interaction mode) refreshes the entire page when submitted

The use of AJAX is asynchronous loading, which can be partially refreshed without reloading the entire page.

What is Ajax?

Full name Ansync JavaScript and XML, is an asynchronous loading technology, local refresh.

How do I use Ajax?

The use of Ajax is divided into native and jq (Jquery). The original one is not very useful, so let's talk about JQ.

(1) Ajax:python code of JQ version: import tornado.webimport tornado.ioloopimport tornado.webclass MainHandler (tornado.web.RequestHandler): def get (self): self.render ("ajax_jquery.html") def post (self, * args) * * kwargs): aaa = int (self.get_argument ("aa")) bbb = int (self.get_argument ("bb")) c = aaa + bbb # echo the front-end data after background processing to the front-end return_data = {"result": C} # construct the data to be transferred into JSON object self. Write (return_data) # echoes the data that the backend needs to pass to the front end if _ _ name__ = = "_ _ main__": application = tornado.web.Application ([(r "/") MainHandler),]) application.listen (8880) # port number tornado.ioloop.IOLoop.current () .start ()

If you report the above error, add the following code:

# tornado under the windows system uses SelectorEventLoopimport platformif platform.system () = "Windows": import asyncio asyncio.set_event_loop_policy (asyncio.WindowsSelectorEventLoopPolicy ()) HTML Code: Ajax_jqueryAJAX + JQUERY for interaction + = calculate / / get the element var ipt = $("input"); var btn = $("# btn1") Btn.click (function () {/ / get the value var a = ipt.eq (0). Val (); / / eq is the label corresponding to the subscript Val () is the value var b = ipt.eq (1) .val () entered by the user in the tag. / / use the Ajax method encapsulated in JQ to transfer the front-end data to the backend $.ajax ({"type": "post", / / data transfer method: post,get "url": "/" / / submitted path "data": {/ / data transferred in the form of key-value pairs (data that needs to be transferred to the background) "aa": a, "bb": B}, / / after the callback function success Ajax request is sent successfully Automatically execute this function "success": function (data2) {/ / data of callback== server write x = data2 ["result"] Ipt.eq (2) .val (x); / / put the echoed data into the position specified by the front end}, / / the callback function "error" after failure: function (error) {console.log (error);}})})

Let's talk a little bit about synchronization and asynchronism:

Synchronization: after sending a request to the server, you need to wait for the server response to finish before sending a second request. Stutters occur if you send another request without waiting for the server response to finish.

Async: after sending a request to the server, you can send other requests directly without any interference between them. Local refresh can be achieved.

Effect display:

At this point, the study of "what are the important knowledge points of Ajax" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.