<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>测试</title> <script src="../../js/jquery-3.3.1.min.js"></script> </head> <body> <div> 用户名:<input type="text" id="userName" /><br> 密码:<input type="text" id="passWord" /><br /> <button id="btn1">登录</button> </div> <div id="div1" style="background-color: #BBFFAA;"> </div> </body> <script> // 实现功能:将登录的请求发往后端(登录) // 1.获得数据(用户名、密码) // 2.一个的Ajax模板 // Ajax将请求发送给服务器端,异步刷新 // 3.将获得的响应结果进行回显。 $(function() { // 调用方法 $("#btn1").click(function() { login();
}) // 定义方法:登录方法 function login() { var htmlData; // var ajaxUrl = "http://61.166.56.165:8050/waterregime/"; // document.getElementById("div1").innerHTML = "1111"; $("#div1").html("时间你好"); // alert($("#div1").html); let userName = $("#userName").val(); // JQuery方式 let passWord = document.getElementById("passWord").value; // JS方式 let param = { "userName": userName, "passWord": passWord } $.ajax({ // url: ajaxUrl + '/systemdata/getsystemdatalist', url: "http://www.baidu.com", // 请求Url type: "POST", // 请求方式:GET/POST data: param, // 请求参数 success: function(response) { // 请求成功之后的回调函数 // 回显 // {//回显对象 // "code": 0, // "data": data, // "message": "操作成功" // } $("#div1").html(response); $("#div1").html(response.data);//获取对象中某一属性的值 }, error: function(error) { // 请求失败的回调函数 alert(error); } }) } </script> </html> |
|
来自: 昵称70680357 > 《待分类》