


Let's briefly talk about the key points of Ajax before and after interaction
This article brings you relevant knowledge about ajax, including json, front and back interaction, etc. I hope it will be helpful to everyone.
Part 1: Introduction to JSON
##nbsp;html>
<meta>
<title>JSON</title><script>
//定义一个JSON对象
var obj = {
"class":"数据结构",
"name":66,
"student":65
};
//可读性
console.log(obj);
console.log(obj.class);
// 可写行
obj.student = "学生真棒";
console.log(obj.student);
console.log(typeof obj); //object 是一个json对象
// JSON遍历
for(var key in obj){
console.log(key + ":" + obj[key]);
}
// JSON对象转字符串
var obj1 = JSON.stringify(obj);
console.log(typeof obj1); //string
// 字符串转JSON对象
var obj2 = JSON.parse(obj1);
console.log(typeof obj2); //object</script>
Effect display:
One:
Tips:HTML code:import tornado.web
View its source code: 26-38 lines tornado version Hello world, just take it and change it~
nbsp;html>
<meta>
<title>前后交互--form表单</title>
Python code: import tornado.webimport tornado.ioloopimport tornado.webclass MainHandler(tornado.web.RequestHandler):
def get(self):
self.render("Ajax_form.html") #需要进行前后交互的HTML文件的路径
def post(self, *args, **kwargs): #此处的用post还是get取决于HTML文件中form表单的method属性(二者一样)
#通过打印在控制台进行查看,有没有成功从前端拿到信息
print(self.get_argument("user")) #.get_argument()拿到的是单个的参数,里面参数是form表单里name属性的属性值。
print(self.get_argument("pwd"))
self.write("提交成功!") if __name__ == "__main__":
application = tornado.web.Application([
(r"/", MainHandler), #需要和form表单里的action一致。
])
application.listen(8888) #端口号
tornado.ioloop.IOLoop.current().start()
Extension:How to implement:If Error: NotImplementedError
Read this article: https://blog.csdn.net/hank5658/article/details/106870245
First: run .py fileEffect display:After no error is reported, run the HTML file
Then change the address bar of the front-end interface to: 127.0.0.1:8888 and press 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 username and password in the pycharm console.
## (2) Using AJAX Perform front-end and back-end interaction
- Ajax function?
- Using the form form for front-end and back-end interaction (traditional interaction mode) will refresh the entire page when submitting;
Using AJAX will perform
asynchronous loading
, and the entire page can be loaded without reloading Partial refresh under the premise. What is Ajax? - The full name is Ansync JavaScript and XML, which is an asynchronous loading technology with partial refresh.
- The use of Ajax is divided into two types: native and jq (Jquery). The native one is not very useful, so let’s talk about the JQ one below.
python code:
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 # 将后台处理过后的前端的数据回显到前端 return_data = {"result":c} #将需要传输的数据构造成JSON对象 self.write(return_data) #将后台需要传递给前端的数据回显给前端if __name__ == "__main__": application = tornado.web.Application([ (r"/", MainHandler), ]) application.listen(8880) #端口号 tornado.ioloop.IOLoop.current().start()If the error mentioned above is reported, add the following code :
# windows 系统下 tornado 使用 SelectorEventLoopimport platformif platform.system() == "Windows":
import asyncio
asyncio.set_event_loop_policy(asyncio.WindowsSelectorEventLoopPolicy())
HTML code:
nbsp;html> <meta> <title>Ajax_jquery</title><h1 id="AJAX-JQUERY-实现前后交互">AJAX + JQUERY 实现前后交互</h1><input>+<input>=<input><button>计算</button><script></script> <!--要用网址引用--><script> // 获取元素 var ipt = $("input"); var btn = $("#btn1"); btn.click(function () { // 获取值 var a = ipt.eq(0).val(); //eq是获取下标对应的标签;val()是得到该标签内用户输入的值 var b = ipt.eq(1).val(); // 使用JQ里面封装好的Ajax方法将前端的数据传输给后端 $.ajax({ "type":"post", //数据传输的方式:post,get "url":"/", //提交的路径 "data":{ //键值对形式 传输的数据(需要传输到后台的数据) "aa":a, "bb":b }, // 前后端成功之后的回调函数success Ajax请求发送成功后,自动执行此函数 "success":function (data2) { //callback==服务器write的数据 x = data2["result"]; ipt.eq(2).val(x); //将回显的数据放进前端指定的位置 }, // 失败之后的回调函数 "error":function (error) { console.log(error); } }) })</script>Roughly speaking, synchronization and asynchronousness:
Synchronization: After sending a request to the server, You need to wait for the server response to complete before sending the second request. If you send other requests without waiting for the server response to end, lag will occur.
Asynchronous: After sending a request to the server, you can send other requests directly without any interference between them. Partial refresh can be achieved.Effect display:
[Related tutorial recommendations:
The above is the detailed content of Let's briefly talk about the key points of Ajax before and after interaction. For more information, please follow other related articles on the PHP Chinese website!

React'sstrongcommunityandecosystemoffernumerousbenefits:1)ImmediateaccesstosolutionsthroughplatformslikeStackOverflowandGitHub;2)Awealthoflibrariesandtools,suchasUIcomponentlibrarieslikeChakraUI,thatenhancedevelopmentefficiency;3)Diversestatemanageme

React's componentized architecture makes scalable UI development efficient through modularity, reusability and maintainability. 1) Modularity allows the UI to be broken down into components that can be independently developed and tested; 2) Component reusability saves time and maintains consistency in different projects; 3) Maintainability makes problem positioning and updating easier, but components need to be avoided overcomplexity and deep nesting.

TonavigateReact'scomplexecosystemeffectively,understandthetoolsandlibraries,recognizetheirstrengthsandweaknesses,andintegratethemtoenhancedevelopment.StartwithcoreReactconceptsanduseState,thengraduallyintroducemorecomplexsolutionslikeReduxorMobXasnee

Reactuseskeystoefficientlyidentifylistitemsbyprovidingastableidentitytoeachelement.1)KeysallowReacttotrackchangesinlistswithoutre-renderingtheentirelist.2)Chooseuniqueandstablekeys,avoidingarrayindices.3)Correctkeyusagesignificantlyimprovesperformanc

KeysinReactarecrucialforoptimizingtherenderingprocessandmanagingdynamiclistseffectively.Tospotandfixkey-relatedissues:1)Adduniquekeystolistitemstoavoidwarningsandperformanceissues,2)Useuniqueidentifiersfromdatainsteadofindicesforstablekeys,3)Ensureke

React's one-way data binding ensures that data flows from the parent component to the child component. 1) The data flows to a single, and the changes in the state of the parent component can be passed to the child component, but the child component cannot directly affect the state of the parent component. 2) This method improves the predictability of data flows and simplifies debugging and testing. 3) By using controlled components and context, user interaction and inter-component communication can be handled while maintaining a one-way data stream.

KeysinReactarecrucialforefficientDOMupdatesandreconciliation.1)Choosestable,unique,andmeaningfulkeys,likeitemIDs.2)Fornestedlists,useuniquekeysateachlevel.3)Avoidusingarrayindicesorgeneratingkeysdynamicallytopreventperformanceissues.

useState()iscrucialforoptimizingReactappperformanceduetoitsimpactonre-rendersandupdates.Tooptimize:1)UseuseCallbacktomemoizefunctionsandpreventunnecessaryre-renders.2)EmployuseMemoforcachingexpensivecomputations.3)Breakstateintosmallervariablesformor


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

SublimeText3 Chinese version
Chinese version, very easy to use

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
