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>
  • 相关阅读:
    两种选择排序法
    三种方法求组合偶数字
    sizeof和mallo
    多态的概念与接口重用
    Delphi Exception的理解
    给老婆留着
    Delphi 一个简单的DELPHI自定义事件的例子
    Delphi 纯Pascal编写的程序,没有通过VCL
    Delphi 继承类的构造函数和析构函数的构建顺序
    Delphi 对象间数据的复制
  • 原文地址:https://www.cnblogs.com/rainbowupdate/p/12769056.html
Copyright © 2011-2022 走看看