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>
  • 相关阅读:
    关于团体项目技术选型的补充
    关于此次团队项目中技术选型问题
    习题3 怎样与用户有效地沟通以获取用户的真实需求?
    面向过程(或者叫结构化)分析方法与面向对象分析方法到底区别在哪里?请根据自己的理解简明扼要的回答。
    你认为一些军事方面的软件系统采用什么样的开发模型比较合适?
    此次项目之用户手册
    形式化说明技术以及图书流通系统。
    此次项目的需求验证
    随着物流的发展、虚拟技术的发展,实体商场到底以什么样的形式存在(在未来)的呢?
    此次项目的过程模型选择
  • 原文地址:https://www.cnblogs.com/rainbowupdate/p/12769056.html
Copyright © 2011-2022 走看看