JS之——回调函数的简单应用（插曲）

来源：互联网发布：淘宝买家信息收集器编辑：程序博客网时间：2024/06/09 03:23

转载请注明出处:http://blog.csdn.net/l1028386804/article/details/46274893

JS无疑是前端页面与服务端交互数据的强大语言，那么如何利用JS的回调函数来封装JS的网络请求呢，本文就来简单说明这一问题

一、创建一个index.html文件

页面内容随便定义,重点是要引入如下自定义的两个js文件，一个是constants.js一个是validate.js

二、创建constants.js文件

/** * Created by liuyazhuang on 2015/5/29. * 此文件封装了一些访问网络请求的url, * 封装了一些回调函数的用法和一些常量 *///lyz的服务器var base_url_lyz_server = "http://192.168.254.109:10002/tea";//lyz图片var base_url_lyz_img_server = "http://192.168.254.109:10002";//postvar REQUEST_TYPE_POST = "POST";//GETvar REQUEST_TYPE_GET = "GET";//拼接字符串//uri除了基本路径以外的具体接口路径//isValidate标志是否需要登录,true需要登录,false不需要登录function getUrl(uri, isValidate){    var url = base_url_lyz_server+ uri;    if(isValidate){        var token = getValueFromLocalStorage("token");        var username = getValueFromLocalStorage("phone");        url = url+"?access_token="+token+"&mobile_user_name="+username;    }    return url;}//图片的路径function getImgUrl(uri){    return base_url_native_img_server + uri;}//获取localStorage中的某个值function getValueFromLocalStorage(key){    return localStorage.getItem(key) ? localStorage.getItem(key) : "";}//移出指定的keyfunction removeValuesFromLocalStorage(keys){    for(var i = 0; i < keys.length; i++){        localStorage.removeItem(keys[i]);    }}/** * 封装的ajax请求数据 * url:请求的路径 * params:参数 * isValidate:是否需求登录验证 * type:访问类型:"POST","GET", * method:回调的方法名称 */function requestDataByAjax(url, isValidate, params, type, method){    $.ajax({        type: type,        url: getUrl(url, isValidate),        cache: false,        async: false,        data:{            "parameter":params        },        success: function (result) {           //回调函数解析数据            method(result);        },        error: function (XMLHttpRequest, textStatus, errorThrown) {            alert("错误：" + textStatus);        }    });}

在这个js文件中

划线部分是网络请求返回成功数据后要调用的回调函数名称，所有与网络请求相关的业务都可以调用这个方法，服务端返回的数据解析只需交给相应的回调函数即可，这既体现了代码的封装性，又大大提高了代码的维护性。

三、创建validate.js

//请求地址requestDataByAjax("/website/address/default_address",true, JSON.stringify({"mobile_id": userId}), REQUEST_TYPE_POST, validate_parseAddressResult);//回调方法解析地址数据function validate_parseAddressResult(result){    //数据返回正常    console.log(result);    if(result.code == 1001){        var message = result.message;        $("#appointment_name").text(message.name);        $("#appointment_phone").text(message.phone);        $("#appointment_address").text(message.address);        localStorage.setItem("sendName",message.name);        localStorage.setItem("sendPhone",message.phone);        localStorage.setItem("sendAddress",message.address);    }}

这个js文件中

划线部分的名称是一样的,调用constants.js的requestDataByAjax方法将方法function validate_parseAddressResult(result)的名称名称作为参数，当网路请求成功返回数据后，就会自动调用function validate_parseAddressResult(result)这个方法来解析数据了

四、测试

0 0