对Jquery中的ajax再封装,简化操作示例

下面是对jQuery中的ajax再封装，简化操作的完整攻略：

概述

在实际项目中，我们经常会使用 jQuery 的 ajax 来实现异步请求。但是每次都需要设置 type、url、data、dataType、success 等参数，代码显得很冗长。为了简化代码和提升开发效率，我们可以对 jQuery 的 ajax 进行二次封装，把需要设置的参数封装好，以便在实际项目中直接调用，从而达到简化操作的目的。

封装步骤

1.创建封装函数

在 jQuery 的基础上创建一个封装函数，封装函数需要传递以下参数：

url：请求的地址（必须）
data：请求时的参数（可选）
successFunc：请求成功后调用的函数（可选）
errorFunc：请求失败后调用的函数（可选）

代码示例：

function myAjax(url, data, successFunc, errorFunc) {
    $.ajax({
        type: "POST",
        url: url,
        data: data,
        dataType: "json",
        success: function (res) {
            if(successFunc){
                successFunc(res);
            }
        },
        error: function (err) {
            if(errorFunc){
                errorFunc(err);
            }
        }
    });
}

2.调用封装函数

在需要发送请求的地方，直接调用封装好的函数即可完成 ajax 请求：

myAjax("http://www.example.com/api", {name: "Lucy", age: 18}, function(res){
    console.log(res);
}, function(err){
    console.error(err);
});

示例说明

示例1：获取天气预报

我们需要获取某个城市的天气预报数据，并将数据展示在页面中。

首先，在页面中添加一个 div 标签，用来展示数据：

<div id="weatherData"></div>

然后，调用封装好的函数从服务器获取数据：

myAjax("http://www.example.com/api/weather", {city: "上海"}, function(res){
    var data = res.data;
    var weatherHtml = "<p>城市：" + data.cityname +"</p>";
    weatherHtml += "<p>日期：" + data.date +"</p>";
    weatherHtml += "<p>天气：" + data.weather +"</p>";
    weatherHtml += "<p>温度：" + data.temp1 + " ~ " + data.temp2 + "</p>";
    $("#weatherData").html(weatherHtml);
}, function(err){
    console.error(err);
});

在服务器上处理请求，并返回 JSON 数据：

{
    "code": 0,
    "msg": "请求成功",
    "data": {
        "cityname": "上海",
        "date": "2020-08-18",
        "weather": "晴",
        "temp1": "26℃",
        "temp2": "35℃"
    }
}

最终结果：

城市：上海
日期：2020-08-18
天气：晴
温度：26℃ ~ 35℃

示例2：提交表单

我们需要使用 ajax 将表单数据提交到服务器进行处理，并根据处理结果给出提示。

首先，创建一个表单，包括姓名和密码两个输入框以及一个提交按钮：

<form id="myForm">
    <div>
        <label for="username">姓名：</label>
        <input id="username" type="text" name="username">
    </div>
    <div>
        <label for="password">密码：</label>
        <input id="password" type="password" name="password">
    </div>
    <div>
        <button type="button" id="submitBtn">提交</button>
    </div>
</form>

然后，在页面中添加一个 div 标签，用来展示提示信息：

<div id="msg"></div>

接着，添加点击事件监听器，获取表单数据并通过封装好的函数提交到服务器进行处理：

$("#submitBtn").on("click", function(){
    var formData = $("#myForm").serialize();
    myAjax("http://www.example.com/api/submitForm", formData, function(res){
        if(res.code === 0){
            $("#msg").html("提交成功！");
        }else{
            $("#msg").html("提交失败！");
        }
    }, function(err){
        console.error(err);
    });
});