zoukankan      html  css  js  c++  java
  • 一个和与后台数据连接的模板get post put 以及延伸的query

    /*
    example:

    require.config({
    paths: {
    "httpClient": "../../core/http-client"
    }
    });

    require(['httpClient'], function (httpClient) {
    httpClient.get("categories", function (res) {
    console.log(res)
    })
    })
    */

    define(["jquery"], function ($) {

    // const API_URL = "http://wcapi.novonity.com/api/v1/";
    const API_URL = "http://192.168.2.63:8989/api/v1/";

    var get = function (url, success, fail) {
    request({
    type: 'get', url: API_URL + url, success: function (res) {
    hideDataLoading();
    success && success(res);
    }, error: fail
    })
    };

    var query = function (url, queryParams, success, fail) {
    request({
    type: 'get', url: API_URL + url + '?' + $.param(queryParams), success: function (res) {
    hideDataLoading();
    success && success(res);
    }, error: fail
    })
    };

    var put = function (url, data, success, fail) {
    request({
    type: 'put', data: data, url: API_URL + url, success: function (res) {
    hideDataLoading();
    success && success(res);
    }, fail: fail
    })
    };

    var post = function (url, data, success, fail) {
    request({
    type: 'post', data: data, url: API_URL + url, success: function (res) {
    hideDataLoading();
    success && success(res);
    }, fail: fail
    })
    };

    return {
    get: get,
    query: query,
    put: put,
    post: post
    };

    function request(options) {
    showDataLoading();
    $.ajax(options);
    }

    function showDataLoading() {
    if (document.getElementById('dataLoading')) {
    return;
    }
    var div = document.createElement("div");
    div.setAttribute("id", "dataLoading");
    div.setAttribute("style", getRefreshDivStyle());
    div.innerHTML = "加载中...";
    document.body.appendChild(div);
    }

    function hideDataLoading() {
    $("#dataLoading").remove();
    }

    function getRefreshDivStyle() {
    return " 160px;height: 100px;text-align: center;color: #fff;position: fixed;top: 50%;left: 50%;margin-left: -80px;" +
    "margin-top: -50px;background-color: rgba(0, 0, 0, 0.6);z-index: 9999;line-height: 100px;border-radius: 5px;font-size: 16px;";
    }
    });

  • 相关阅读:
    ----Vue 单页应用的首屏优化----
    ----小程序之rich-text图片宽度自适应----
    ----vue-router 如何在新窗口打开页面----
    ----element-ui实现时间控件开始时间和结束时间关联----
    ----element-ui自定义表单验证----
    ----js中的every和some----
    「Linux学习」之挂载访问samba服务
    「Linux学习」之samba和nfs共享服务搭建
    「Linux学习」之防火墙服务设置
    「linux学习」之批量创建用户脚本
  • 原文地址:https://www.cnblogs.com/wangxiaoer5200/p/8695004.html
Copyright © 2011-2022 走看看