javaScript&ajax

时间:2020-07-11
本文章向大家介绍javaScript&ajax，主要包括javaScript&ajax使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

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>

原文地址：https://www.cnblogs.com/tour8/p/13285687.html

随机文章
Javascript知识点必读
最近更新