javaScript&ajax
阿新 • • 發佈：2020-07-12
1、需要HTML標籤轉義後才可執行
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8<!--1、寫一個登入頁面--> 9 10 <!--基本不用form傳送請求--> 11 <!--<form action="http://api.nnzhp.cn/api/user/login" method="post">--> 12 13 <input type="text" name="username"id="username" value="niuhanyang"> 14 <input type="password" name="password" id="password" value="aA123456"> 15 <!--點選事件--> 16 <input type="button" value="登入" id="login" onclick="login()"> 17 18 <!--<input type="submit" value="提交" onclick="login()">--> 19 <!--<input type="button" value="登入-ID" id="id1">--> 20 21 <!--</form>--> 22 23 <script src="jquery.js"></script> 24 <script> 25 function login() { 26 //獲取 使用者名稱和密碼 27 var username = document.getElementById('username').value 28 var password = document.getElementById('password').value 29 30 console.log('username:'+username) 31 console.log('password:'+password) 32 33 //發請求 34 // ajax jquery(js dom封裝了 變的更好用的包) 35 $.ajax({ 36 url: 'http://api.nnzhp.cn/api/user/login', 37 method: 'post', 38 data: { 39 username: username, 40 passwd: password 41 }, 42 //success 回撥函式 43 success: function (response) { 44 if (response.error_code != 0) { 45 alert(response.msg) 46 }else { 47 //當登入成功，希望將sign userId 渲染到頁面上 48 //createElement obj 49 //insertxxxHTML() 50 51 //1.獲取sign userid 52 var sign = response.login_info.sign; 53 var user_id = response.login_info.userId; 54 55 //2.建立字串標籤 56 var sign_span = '<span style="display:block">sign:'+sign+'</span>' 57 var user_span = '<span style="display:block"> user:'+user_id+'</span>' 58 59 //3.渲染到頁面上 60 var button = document.getElementById('login') 61 button.insertAdjacentHTML('afterEnd',sign_span+user_span) 62 63 console.log(response) 64 65 //window.location.href = 'http://www.baidu.com' 66 } 67 } 68 69 }) 70 71 // console.log('username:'+username) 72 // console.log('password:'+password) 73 // alert('請求後臺了') 74 75 76 //// 如果使用者名稱 不是admin 丟擲異常 77 //// if(username == 'admin' && password =='123456'){ 78 //// if(username == 'admin' || password =='123456'){ 79 // 80 //// == 不驗證資料型別；===資料型別和值都驗證 81 // if(username == 'admin'){ 82 // console.log('username是admin') 83 // }else if(username == 'user'){ 84 // console.log('username是user') 85 // } 86 // else{ 87 // console.log('username不是admin') 88 // } 89 90 91 // switch (username){ 92 // case 'admin': 93 // alert('admin') 94 // break; 95 // case 'user': 96 // alert('user') 97 // break; 98 // default: 99 // alert('default') 100 // } 101 102 103 // //迴圈 陣列 104 // var tmp = ['寶馬','賓士','尼桑'] 105 // for (num in tmp){ 106 // console.log(tmp[num]) 107 // } 108 109 110 // //迴圈 map 111 // var tmp = {'name':'BMW','age':18}; 112 // for (key in tmp){ 113 // console.log(tmp[key]) 114 // } 115 116 117 // //迴圈 118 // var tmp = ['寶馬','賓士','尼桑'] 119 // for(var i=0; i<tmp.length;i++){ 120 // console.log(tmp[i]) 121 // } 122 // 123 124 } 125 126 127 // var element = document.getElementById('id1'); 128 // element.onclick = function () { 129 //// console.log('這裡請求 後臺了...element') 130 //// alert('請求後臺了') 131 // 132 // var flag = confirm('你確認登入了？？') 133 // console.log(flag) 134 // } 135 136 137 // //普通函式 138 // function funcname(name,age) { 139 // 140 // 141 // } 142 // funcname('lzh',18); 143 144 145 // //匿名函式 146 // //函式即變數 147 // var funcNameTwo = function(){ 148 // 149 // } 150 // funcNameTwo(); 151 152 </script> 153 </body> 154 </html>