`

简单的ajax封装

    博客分类:
  • ajax
阅读更多
// ajax发送post请求返回 json 数据
function requestJSON(params) {
    params.dataType = 'json';
    sendPost(params);
}

// ajax发送post请求返回 string字符串
function requestString(params) {
    params.dataType = 'text';
    sendPost(params);
}

// ajax发送post请求
function sendPost(params) {
    params.type = 'post';
    sendRequest(params);
}

// ajax发送get请求
function request(params) {
    params.type = 'get';
    sendRequest(params);
}

// ajax请求封装
function sendRequest(params) {
    params = $.extend({}, { async: true }, params);
    $.ajax({
        url: params.url,
        data: params.data,
        type: params.type,
        dataType: params.dataType,
        success: params.success,
        async: params.async,
        beforeSend: function () {
            if (typeof (params.before) == 'function') {
                params.before();
            }
            else {
                // 页面数据请求提示loading效果
                jQuery('body').Loading({ marginTop: '-300px;' });
            }
        },
        error: function () {
            jQuery('body').hideLoading();
            if (typeof (params.error) == 'function') params.error();
        },
        complete: function () {

            if (typeof (params.complete) == 'function') {
                params.complete();
            }
            else {
                // 请求完成处理
                jQuery('body').hideLoading();
            }
        }
    });
}



////---------------------------------@发布---------------------------//
function textChange(options) {
    var opt = $.extend({
        Content: ''
    }, options);
    var objId = opt.Content;
    var obj = $("#" + objId);
    obj.keydown(function (evt) {
        var k = window.event ? evt.keyCode : evt.which;
        var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
        if (isChrome&&k==16) {
            k=50;
        }
        //为@键值时
        //这里监听输入框的keyup事件
        //不为空 && 不为上箭头或下箭头或回车
        if (k == 50 && evt.shiftKey) {
            buildTip(obj, '');
        }
        else if (k == 13 || k == 38 || k == 40) { //回车
            if ($('#searchresult ul').length > 0) {
                if (k == 38) { //上箭头
                    $('#searchresult a.searchHover').parent().prev().find("a").addClass("searchHover");
                    $('#searchresult a.searchHover').parent().next().find("a").removeClass("searchHover");
                } else if (k == 40) { //下箭头
                    $('#searchresult a.searchHover').parent().next().find("a").addClass("searchHover");
                    $('#searchresult a.searchHover').parent().prev().find("a").removeClass("searchHover");
                } else if (k == 13) { //回车
                    var selContent = $('#searchresult a.searchHover').attr('rname');
                    if (selContent == "" || selContent == undefined) return;
                    var content = selContent + ' ';

                    //移除textarea里面@后面多余数据
                    var pointIndex = getPositionForTextArea(obj[0]);
                    var searchName = "";
                    var atIndex = obj.val().substring(0, pointIndex).lastIndexOf("@", atIndex);
                    obj.val(obj.val().substring(0, atIndex + 1) + obj.val().substring(pointIndex));

                    var newIndex = getPositionForTextArea(obj[0]);
                    setCursorPosition(obj[0], newIndex - (newIndex - atIndex - 1));

                    resetPostion(content, obj);
                    $("#searchresult").remove();
                }
                evt.returnValue = false;
                return false;
            }
        }
        else {
            //$("#searchresult").remove();
        }
    });

    obj.keyup(function (evt) {
        var k = window.event ? evt.keyCode : evt.which;
        if (k != 13 && k != 38 && k != 40) {
            if ($('#searchresult ul').length > 0) {
                var pointIndex = getPositionForTextArea(obj[0]);
                var searchName = "";
                var atIndex = obj.val().substring(0,pointIndex).lastIndexOf("@", atIndex);
                searchName = obj.val().substring(atIndex + 1, pointIndex);
                buildTip(obj, searchName);
            }
        }
    });
}

//构建提示信息
function buildTip(obj, serachname) {
    $.ajax({
        type: 'post',
        url: '',
        data: '',
        dataType: 'json',
        success: function (data) {
            var objData = data.list;
            if (objData.length > 0) {
                if ($("#searchresult").length > 0)
                    $("#searchresult").remove();
                var layer = "";
                layer = "<div id='searchresult'><ul>";
                $.each(objData, function (idx, item) {
                    layer += "<li><a href='javascript:void(0);' ></a></li>";
                });
                layer += "</ul></div>";

                //将结果添加到div中
                obj.after($(layer));
                $("#searchresult a:first").addClass("searchHover");
                $("#searchresult").css("display", "");

                //鼠标点击事件
                $("#searchresult a").click(function () {
                    var content = $(this).attr('rname') + ' ';
                    resetPostion(content, obj);
                    $("#searchresult").empty();
                    $("#searchresult").css("display", "none");
                });

                $("#searchresult a").each(function () {
                    $(this).mouseover(function (e) {
                        $("#searchresult a").removeClass("searchHover");
                        $(this).addClass("searchHover");
                    });
                });

                //evt.stopPropagation();

                //处理js事件冒泡问题
                $('body').bind("click", function (e) {
                    $("#searchresult").remove();
                    e.stopPropagation();
                });
                $("#searchresult").bind("click", function (e) {
                    e.stopPropagation();
                });

            } else {
                $("#searchresult").remove();
            }
        }
    });
}

var cpos = 0;
function resetPostion(content, target) {
    var tc = target[0];

    if (document.selection) {//ie
        target.bind("click keyup", function (e) {//点击或键盘动作时设置光标值
            e.stopPropagation();
            cpos = getPositionForTextArea(tc);
        });
    }
    var tclen = target.val().length;
    var pos = 0;
    if (typeof document.selection != "undefined") {//IE
        target.focus();
        //setCursorPosition(tc, cpos);//设置焦点
        document.selection.createRange().text = content;
        //计算光标位置
        pos = getPositionForTextArea(tc);
    } else {//火狐
        //计算光标位置
        pos = tc.selectionStart + content.length;
        target.val(target.val().substr(0, tc.selectionStart) + content + target.val().substring(tc.selectionStart, tclen));
    }
    cpos = pos;
    setCursorPosition(tc, pos); //设置焦点
}

//textarea设置光标位置
function setCursorPosition(ctrl, pos) {
    if (ctrl.setSelectionRange) {
        ctrl.focus();
        ctrl.setSelectionRange(pos, pos);
    } else if (ctrl.createTextRange) {// IE Support
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

//获取多行文本框光标位置
function getPositionForTextArea(obj, content) {
    var CaretPos = -1;
    if (typeof document.selection != "undefined") {//IE
        var Sel = document.selection.createRange();
        var Sel2 = Sel.duplicate();
        Sel2.moveToElementText(obj);
        while (Sel2.inRange(Sel)) {
            Sel2.moveStart('character');
            CaretPos++;
        }
    }
    else {
        if (content == undefined)
            content = "";
        CaretPos = obj.selectionStart + content.length;
    }
    return CaretPos;

}
分享到:
评论

相关推荐

    简单ajax封装小工具

    这个“简单ajax封装小工具”可能是将常见的Ajax请求功能如GET、POST等进行了抽象和简化,方便开发者快速调用。通常,一个简单的Ajax封装可能包括以下组成部分: 1. **创建XMLHttpRequest对象**:这是Ajax的核心,...

    简单封装Ajax

    【简单封装Ajax】这篇文章主要探讨的是如何在JavaScript中对原生的XMLHttpRequest对象进行简单的封装,以便于在实际开发中更方便地进行异步数据请求。在Web开发中,Ajax(Asynchronous JavaScript and XML)是一种...

    自己用的简单封装AJAX类

    **标题解析:** "自己用的简单封装AJAX类" 指的是作者为了个人使用需求,编写了一个简化的AJAX处理类。AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,...

    ajax封装实例代码

    Ajax封装则是将常见的Ajax操作进行模块化处理,方便开发者在项目中快速、高效地实现数据交互。本篇文章将深入探讨Ajax封装实例代码及其相关知识点。 首先,我们来看Ajax的核心原理:通过JavaScript创建...

    html5页面开发源代码(含ajax封装及调用方法)

    提供完整的html5页面开发流程和开发方式,包括html5页面开发代码,含ajax封装方法,以及调用的方式

    利用AJAX封装Form

    ajax技术封装表单的实例,完整代码,易看懂。用于学习ajax。

    原生js的AJAX封装以及实例展示.zip

    这个压缩包"原生js的AJAX封装以及实例展示.zip"包含了对AJAX的简单封装以及一个具体的增删改查(CRUD)操作实例,这将帮助我们深入理解如何在实际项目中应用AJAX。 首先,让我们了解一下AJAX的基本原理。AJAX的核心...

    对jquery的ajax封装

    对常用jquery的ajax函数进行封装,便于调用,会有不同错误的错误提醒

    java中对ajax经典封装

    "ajax封装2_files"、"ajax基本封装_files"和"ajax封装3_files"很可能包含了示例代码的HTML、CSS和JavaScript文件。这些文件可能包含用于演示Ajax请求的按钮、表单和结果显示区域,以及处理Ajax响应的JavaScript函数...

    ajax代码及简单封装

    ### AJAX代码及简单封装知识点详解 #### 一、引言 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换来实现这一功能...

    ajax封装数据原理

    ajax封装数据原理详解,要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看 processData选项。对象必须为key/...

    Ajax 简单封装类库

    ajax轻量级封装,简单实用,带有详细注释。 一、同一个对象可以发送多个请求,按顺序执行请求,有简单的超时机制,httpXMLRequest对象复用,无序的可以建立多个对象发送请求来实现; 二、兼容IE,FF,支持同步、异步...

    ajax封装函数

    对ajax基础的封装

    JS封装的AJAX函数

    总结来说,AJAX封装函数是将复杂的HTTP请求过程简化为易于调用的函数,使得开发者能够更高效地实现异步通信。在实际开发中,这样的封装是非常常见的,它提高了代码的可读性和复用性,降低了开发难度。对于`right.js`...

    封装ajax的js类

    封装ajax与servlet通信的js类,欢迎指正

    ax封装.rar-ajax封装.txt

    Ajax封装则是将Ajax交互过程中的多种操作整合到一个函数或对象中,以便于开发者更方便、高效地使用。这个“ax封装.rar”可能是一个自定义的JavaScript库或者模块,它对原生的Ajax功能进行了封装,提高了代码的可复用...

    ajaxTest 实用简单封装

    **AjaxTest 实用简单封装** Ajax(Asynchronous JavaScript and XML)技术是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,大大提升了...

    ajax封装的dll

    本话题将深入探讨“ajax封装的dll”,这是一种将Ajax功能封装到动态链接库(DLL)中的做法,使得开发者可以更方便地在项目中调用和利用Ajax功能。 首先,DLL(Dynamic Link Library)是Windows操作系统中的一种共享...

    ajax封装.js

    ajax封装.js

    web ajax 的使用 js封装

    【标题】"Web AJAX 使用与JS封装" 在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种核心技术,它使得页面无需重新加载整个网页就能与服务器交换数据并更新部分网页内容。JavaScript是实现AJAX的核心...

Global site tag (gtag.js) - Google Analytics