1.ajax技术向服务器请求数据。更新网页。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form id="myForm"> <label>用户名:</label><input id="username" type = "text" name="username" placeholder="请设置用户名" required/> <span id="msg"></span> <input type="submit" value="submit"> </form> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $().ready(function(){ $("#username").blur(function(){ var username = $("#username").val(); user_span = $("#msg"); console.log("http://127.0.0.1:5000/check_form?username="+username); //发送get请求，第一个参数是url路径，第二个是回调函数 //get post 参数传递方式不同 // $.get("http://127.0.0.1:5000/check_form?username="+username, function(data){ // user_span.text(data) // }) // $.post("http://127.0.0.1:5000/check_form",{"username":username},function(data){ // user_span.text(data); // }) $.getJSON("http://127.0.0.1:5000/show_detail",function(data){ user_span.text(JSON.stringify(data)) }) }) }) </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="but1">点击加载</button> <br><span id="msg"></span> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script> $("#but1").click(function() { $.ajax({ url: "http://127.0.0.1:5000/show_detail", data: { "id": "123" }, type: "GET", async: true, timeout: 300000, //超时时间 dataType: 'text', //返回的数据格式， json/html/xml/script/jsonp/text beforeSend: function (xhr) { console.log("发送请求前") }, success: function(data, textStatus, xhr){ console.log("请求成功"); console.log(data); $("#msg").html(data) }, error: function (xhr, textStatus) { console.log("请求失败"); console.log(textStatus); console.log(xhr) }, complete: function () { console.log("请求结束") } }) }) </script> </body> </html>