zoukankan      html  css  js  c++  java
  • Ajax函数封装

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <script>
            function ajax(options) {
                // 创建Ajax对象
                var xhr = new XMLHttpRequest()
                    // 告诉Ajax对象以什么方式向哪里发送请求
                var params = ''
                for (var attr in options.data) {
                    params += attr + '=' + options.data[attr] + '&'
                }
                params = params.substr(0, params.length - 1)
    
                if (options.type == 'get') {
                    options.url = options.url + '?' + params
                }
    
                xhr.open(options.type, options.url);
                // 发送请求
                if (options.type == 'post') {
                    xhr.send(params)
                } else {
                    xhr.send()
                }
                // 接收响应数据,监听获取数据后的onload事件
                xhr.onload = function() {
                    console.log(xhr.responseText)
                }
            }
    
    
            ajax({
                type: 'get',
                url: 'http://localhost:3000/response',
                data: {
                    name: 'zhangsan',
                    age: 30
                }
            })
        </script>
    </body>
    
    </html>
    

      

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <script>
            function ajax(options) {
                // 创建Ajax对象
                var xhr = new XMLHttpRequest()
                    // 告诉Ajax对象以什么方式向哪里发送请求
                var params = ''
                for (var attr in options.data) {
                    params += attr + '=' + options.data[attr+ '&'
                }
                params = params.substr(0params.length - 1)

                if (options.type == 'get') {
                    options.url = options.url + '?' + params
                }

                xhr.open(options.typeoptions.url);
                // 发送请求
                if (options.type == 'post') {
                    xhr.send(params)
                } else {
                    xhr.send()
                }
                // 接收响应数据,监听获取数据后的onload事件
                xhr.onload = function() {
                    console.log(xhr.responseText)
                }
            }


            ajax({
                type: 'get',
                url: 'http://localhost:3000/response',
                data: {
                    name: 'zhangsan',
                    age: 30
                }
            })
        </script>
    </body>

    </html>
  • 相关阅读:
    Windows下编译TensorFlow1.3 C++ library及创建一个简单的TensorFlow C++程序
    flask自动重启与配置文件导入,路由重定向(8)
    go(4)字符串的应用
    go(3)变量的应用与数据类型
    go(2)输出,转义,字符接收
    go(1)
    tornado集成wtforms
    HTML5笔记007
    HTML5笔记006
    HTML5笔记005
  • 原文地址:https://www.cnblogs.com/rainbowupdate/p/12769056.html
Copyright © 2011-2022 走看看