Ajax扩展

雨点打透心脏的1/2处 2021-08-13 12:04 334阅读 0赞

### 1：模板引擎 ###

### 2：案例 ###

### 3：FormData ###

### 4：同源策略 ###

#### 模板引擎 ####

在官网在在art-template在客户端的库文件

1.  引入当前模板
2.  准备art-template模板
3.  告诉模板引擎将那个数据和那个模板进行拼接

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>art-template在客户端的使用步骤</title>
    
        <script src="/js/template-web.js"></script>
    </head>
    
    <body>
        <div id="contaienr"></div>
        
        <script type="text/html" id="tpl">
            <h1>{ { names}}{ { age}}</h1>
        </script>
        
        <script>
            // 返回值就是拼接好的html字符串
            var html = template('tpl', { 
                names: '张三',
                age: 12
            })
            document.getElementById('contaienr').innerHTML = html
        </script>
    
    </body>
    
    </html>

### 案例 ###

##### 验证邮箱地址的唯一性 #####

1：首先判断是否是有效邮箱地址  
2：使用ajax发送请求，接收数据  
如果请求成功：显示成功提示信息  
请求失败：显示失败信息

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>验证邮箱地址是否已经注册</title>
        <link rel="stylesheet" href="./assets/bootstrap/dist/css/bootstrap.min.css">
        <style type="text/css">
            p:not(:empty) { 
                padding: 15px;
            }
            
            .container { 
                padding-top: 100px;
            }
        </style>
    </head>
    
    <body>
        <div class="container">
            <div class="form-group">
                <label>邮箱地址</label>
                <input type="email" class="form-control" placeholder="请输入邮箱地址" id="email">
            </div>
            
            <p id="info"></p>
        </div>
        <script src="/js/ajax.js"></script>
        <script>
            // 获取页面中的元素
            var emailInp = document.getElementById('email');
            var info = document.getElementById('info');
    
            // 当文本框离开焦点以后
            emailInp.onblur = function() { 
                // 获取用户输入的邮箱地址
                var email = this.value;
                // 验证邮箱地址的正则表达式
                var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
                // 如果用户输入的邮箱地址不符合规则
                if (!reg.test(email)) { 
                    // 给出用户提示
                    info.innerHTML = '请输入符合规则的邮箱地址';
                    // 让提示信息显示为错误提示信息的样式
                    info.className = 'bg-danger';
                    // 阻止程序向下执行
                    return;
                }
    
                // 向服务器端发送请求
                ajax({ 
                    type: 'get',
                    url: 'http://localhost:3000/verifyEmailAdress',
                    data: { 
                        email: email
                    },
                    success: function(result) { 
                        console.log(result);
                        info.innerHTML = result.message;
                        info.className = 'bg-success';
                    },
                    error: function(result) { 
                        console.log(result)
                        info.innerHTML = result.message;
                        info.className = 'bg-danger';
                    }
                });
    
            }
        </script>
    </body>
    
    </html>

文字搜索案例

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>搜索框输入文字自动提示</title>
        <link rel="stylesheet" href='./assets/bootstrap/dist/css/bootstrap.min.css'>
        <style type="text/css">
            .container { 
                padding-top: 150px;
            }
            
            .list-group { 
                display: none;
            }
        </style>
    </head>
    
    <body>
        <div class="container">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="请输入搜索关键字" id="search">
                <ul class="list-group" id="list-box">
    
                </ul>
            </div>
        </div>
        <script src="./js/ajax.js"></script>
        <script src="./js/template-web.js"></script>
        <script type="text/html" id="tpl">
            { { each result}}
            <li class="list-group-item">{ { $value}}</li>
            { { /each}}
        </script>
        <script>
            // 获取搜索框
            var searchInp = document.getElementById('search');
            // 获取提示文字的存放容器
            var listBox = document.getElementById('list-box');
            // 存储定时器的变量
            var timer = null;
            // 当用户在文本框中输入的时候触发
            searchInp.oninput = function() { 
                // 清除上一次开启的定时器
                clearTimeout(timer);
                // 获取用户输入的内容
                var key = this.value;
                // 如果用户没有在搜索框中输入内容
                if (key.trim().length == 0) { 
                    // 将提示下拉框隐藏掉
                    listBox.style.display = 'none';
                    // 阻止程序向下执行
                    return;
                }
    
                // 开启定时器 让请求延迟发送
                timer = setTimeout(function() { 
                    // 向服务器端发送请求
                    // 向服务器端索取和用户输入关键字相关的内容
                    ajax({ 
                        type: 'get',
                        url: 'http://localhost:3000/searchAutoPrompt',
                        data: { 
                            key: key
                        },
                        success: function(result) { 
                            // 使用模板引擎拼接字符串
                            var html = template('tpl', { 
                                result: result
                            });
                            // 将拼接好的字符串显示在页面中
                            listBox.innerHTML = html;
                            // 显示ul容器
                            listBox.style.display = 'block';
                        }
                    })
                }, 800)
    
            }
        </script>
    </body>
    
    </html>

省市联动

```javascript ```javascript
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>搜索框输入文字自动提示</title>
        <link rel="stylesheet" href="./assets/bootstrap/dist/css/bootstrap.min.css">
        <style type="text/css">
            .container { 
                padding-top: 150px;
            }
        </style>
    </head>
    
    <body>
        <div class="container">
            <div class="form-inline">
                <div class="form-group">
                    <select class="form-control" id="province"></select>
                </div>
                <div class="form-group">
                    <select class="form-control" id="city">
    					<option>请选择城市</option>
    				</select>
                </div>
                <div class="form-group">
                    <select class="form-control" id="area">
    					<option>请选择县城</option>
    				</select>
                </div>
            </div>
        </div>
        <script src="/js/ajax.js"></script>
        <script src="/js/template-web.js"></script>
        
        <script type="text/html" id="provinceTpl">
            <option>请选择省份</option>
            { { each province}}
            <option value="{ {$value.id}}">{ { $value.name}}</option>
            { { /each}}
        </script>
        
        <script type="text/html" id="cityTpl">
            <option>请选择城市</option>
            { { each city}}
            <option value="{ {$value.id}}">{ { $value.name}}</option>
            { { /each}}
        </script>
        
        <script type="text/html" id="areaTpl">
            <option>请选择县城</option>
            { { each area}}
            <option value="{ {$value.id}}">{ { $value.name}}</option>
            { { /each}}
        </script>
        <script>
            // 获取省市区下拉框元素
            var province = document.getElementById('province');
            var city = document.getElementById('city');
            var area = document.getElementById('area');
            // 获取省份信息
            ajax({ 
                type: 'get',
                url: 'http://localhost:3000/province',
                success: function(data) { 
                    // 将服务器端返回的数据和html进行拼接
                    var html = template('provinceTpl', { 
                        province: data
                    });
                    // 将拼接好的html字符串显示在页面中
                    province.innerHTML = html;
                }
            });
    
            // 为省份的下拉框添加值改变事件
            province.onchange = function() { 
                // 获取省份id
                var pid = this.value;
    
                // 清空县城下拉框中的数据
                var html = template('areaTpl', { 
                    area: []
                });
                area.innerHTML = html;
    
                // 根据省份id获取城市信息
                ajax({ 
                    type: 'get',
                    url: '/cities',
                    data: { 
                        id: pid
                    },
                    success: function(data) { 
                        var html = template('cityTpl', { 
                            city: data
                        });
                        city.innerHTML = html;
                    }
                })
            };
    
            // 当用户选择城市的时候
            city.onchange = function() { 
                // 获取城市id
                var cid = this.value;
                // 根据城市id获取县城信息
                ajax({ 
                    type: 'get',
                    url: 'http://localhost:3000/areas',
                    data: { 
                        id: cid
                    },
                    success: function(data) { 
                        var html = template('areaTpl', { 
                            area: data
                        });
                        area.innerHTML = html;
                    }
                })
            }
        </script>
    </body>
    
    </html>
    ### FormData
    作用：模拟html表单，相当于将html表单隐射成表单对象，自动将表单对象中的数据拼接成请求参数的格式
    异步上传二进制文件
    步骤：1：准备HTML表单
    2：将html表单转化为formData对象
    3：提交表单对象
    说明：Formdata对象不能用于get请求，因为对象需要被传递到set放法中，而get请求方式的请求参数，只能放在请求地址的后面
    服务端的bodyParser模块不能解析formData数据，需要formidable模块进行解析
    
    ### 同源策略
    协议域名端口号
    使用jsonp解决同源限制问题
    1：将不同源的服务器请求，写在script的src属性里面
    2：服务端响应数据，必须是一个函数的调用，真正发送给客户端的数据需要作为函数调用的参数