请教 jQuery jBox 插件是怎么给一个PHP页面传值的

Question

 jBox 插件只是弹出层的一个插件 传值给php页面还是用传统的传值方式呗 ajax、url等都行

Answer 1

Quote: 引用 1 楼 microlab2009 的回复:

 jBox 插件只是弹出层的一个插件 传值给php页面还是用传统的传值方式呗 ajax、url等都行[/quot你的意思是传值的话专门写个ajax的传值方法吗，用传统的form表单提交不了吗？
以下是我自己的js部分，就是搞不明白怎么把表单中的值传递给Php页面
var _jBoxConfig = {};
        _jBoxConfig.defaults = {
            id: null, /* 在页面中的唯一ID，如果为null则自动为随机ID,一个ID只会显示一个jBox */
            top: '30%', /* 窗口离顶部的距离,可以是百分比或像素(如 '100px') */
            border: 5, /* 窗口的外边框像素大小,必须是0以上的整数 */
            opacity: 0, /* 窗口隔离层的透明度,如果设置为0,则不显示隔离层 */
            timeout: 0, /* 窗口显示多少毫秒后自动关闭,如果设置为0,则不自动关闭 */
            showType: 'fade', /* 窗口显示的类型,可选值有:show、fade、slide */
            showSpeed: 'fast', /* 窗口显示的速度,可选值有:'slow'、'fast'、表示毫秒的整数 */
            showIcon: true, /* 是否显示窗口标题的图标，true显示，false不显示，或自定义的CSS样式类名（以为图标为背景） */
            showClose: true, /* 是否显示窗口右上角的关闭按钮 */
            draggable: true, /* 是否可以拖动窗口 */
            dragLimit: true, /* 在可以拖动窗口的情况下，是否限制在可视范围 */
            dragClone: false, /* 在可以拖动窗口的情况下，鼠标按下时窗口是否克隆窗口 */
            persistent: true, /* 在显示隔离层的情况下，点击隔离层时，是否坚持窗口不关闭 */
            showScrolling: true, /* 是否显示浏览的滚动条 */
            ajaxData: {},  /* 在窗口内容使用post:前缀标识的情况下，ajax post的数据，例如：{ id: 1 } 或 "id=1" */
            iframeScrolling: 'auto', /* 在窗口内容使用iframe:前缀标识的情况下，iframe的scrolling属性值，可选值有：'auto'、'yes'、'no' */            title: 'jBox', /* 窗口的标题 */
            width: 350, /* 窗口的宽度，值为'auto'或表示像素的整数 */
            height: 'auto', /* 窗口的高度，值为'auto'或表示像素的整数 */
            bottomText: '', /* 窗口的按钮左边的内容，当没有按钮时此设置无效 */
            buttons: { '确定': 'ok' }, /* 窗口的按钮 */
            buttonsFocus: 0, /* 表示第几个按钮为默认按钮，索引从0开始 */
            loaded: function (h) { }, /* 窗口加载完成后执行的函数，需要注意的是，如果是ajax或iframe也是要等加载完http请求才算窗口加载完成，参数h表示窗口内容的jQuery对象 */
            submit: function (v, h, f) { return true; }, /* 点击窗口按钮后的回调函数，返回true时表示关闭窗口，参数有三个，v表示所点的按钮的返回值，h表示窗口内容的jQuery对象，f表示窗口内容里的form表单键值 */
            closed: function () { } /* 窗口关闭后执行的函数 */
        };
        _jBoxConfig.stateDefaults = {
            content: '', /* 状态的内容，不支持前缀标识 */
            buttons: { '确定': 'ok' }, /* 状态的按钮 */
            buttonsFocus: 0, /* 表示第几个按钮为默认按钮，索引从0开始 */
            submit: function (v, h, f) { return true; } /* 点击状态按钮后的回调函数，返回true时表示关闭窗口，参数有三个，v表示所点的按钮的返回值，h表示窗口内容的jQuery对象，f表示窗口内容里的form表单键值 */
        };
        _jBoxConfig.tipDefaults = {
            content: '', /* 提示的内容，不支持前缀标识 */
            icon: 'info', /* 提示的图标，可选值有'info'、'success'、'warning'、'error' */
            top: '40%', /* 提示离顶部的距离,可以是百分比或像素(如 '100px') */
            width: 'auto', /* 提示的高度，值为'auto'或表示像素的整数 */
            height: 'auto', /* 提示的高度，值为'auto'或表示像素的整数 */
            opacity: 0, /* 窗口隔离层的透明度,如果设置为0,则不显示隔离层 */
            timeout: 2000, /* 提示显示多少毫秒后自动关闭,必须是大于0的整数 */
            closed: function () { } /* 提示关闭后执行的函数 */
        };
        _jBoxConfig.messagerDefaults = {
            content: '', /* 信息的内容，不支持前缀标识 */
            title: 'jBox', /* 信息的标题 */
            icon: 'none', /* 信息图标，值为'none'时为不显示图标，可选值有'none'、'info'、'question'、'success'、'warning'、'error' */
            width: 350, /* 信息的高度，值为'auto'或表示像素的整数 */
            height: 'auto', /* 信息的高度，值为'auto'或表示像素的整数 */
            timeout: 3000, /* 信息显示多少毫秒后自动关闭,如果设置为0,则不自动关闭 */
            showType: 'slide', /* 信息显示的类型,可选值有:show、fade、slide */
            showSpeed: 600, /* 信息显示的速度,可选值有:'slow'、'fast'、表示毫秒的整数 */
            border: 0, /* 信息的外边框像素大小,必须是0以上的整数 */
            buttons: {}, /* 信息的按钮 */
            buttonsFocus: 0, /* 表示第几个按钮为默认按钮，索引从0开始 */
            loaded: function (h) { }, /* 窗口加载完成后执行的函数，参数h表示窗口内容的jQuery对象 */
            submit: function (v, h, f) { return true; }, /* 点击信息按钮后的回调函数，返回true时表示关闭窗口，参数有三个，v表示所点的按钮的返回值，h表示窗口内容的jQuery对象，f表示窗口内容里的form表单键值 */
            closed: function () { } /* 信息关闭后执行的函数 */
        };
        _jBoxConfig.languageDefaults = {
            close: '关闭', /* 窗口右上角关闭按钮提示 */
            ok: '确定', /* $.jBox.prompt() 系列方法的“确定”按钮文字 */
            yes: '是', /* $.jBox.warning() 方法的“是”按钮文字 */
            no: '否', /* $.jBox.warning() 方法的“否”按钮文字 */
            cancel: '取消' /* $.jBox.confirm() 和 $.jBox.warning() 方法的“取消”按钮文字 */
        };        $.jBox.setDefaults(_jBoxConfig);

function complex01() {

            var html1 = '<div class="msg-div">' +
'<form action="http://172.16.1.226/ihuangpu_com/plus/zhongjiangdengji.php" method="post">' +
                        '<p>购买数量：</p><div class="field"><input type="text" id="amount" name="amount" style="width:75px;" value="1" /></div>' +
                        '<p>收货地址：</p><div class="field"><textarea id="address" name="address"></textarea></div>' +
                        '<div class="errorBlock" style="display: none;"></div>' +
'</form>' +
                        '</div>';
            var html2 = '<div class="msg-div">' +
                        '<form action="#" method="post">' +
'<p>给卖家留言：<span style="color:gray">（选填，可以告诉卖家您对商品的特殊要求）</span></p><div class="field"><textarea id="message" name="message"></textarea></div>' +
                        '</form>' +
'</div>';
            var data = {};
            var states = {};
            states.state1 = {
                content: html1,
                buttons: { '下一步': 1, '取消': 0 },
                submit: function (v, h, f) {
                    if (v == 0) {
                        return true;  // close the window
                    }
                    else {
                        h.find('.errorBlock').hide('fast', function () { $(this).remove(); });
                        data.amount = f.amount;  //或 h.find('#amount').val();
                        if (data.amount == '' || parseInt(data.amount) < 1) {
                            $('<div class="errorBlock" style="display: none;">请输入购买数量！</div>').prependTo(h).show('slow');
                            return false;
                        }
                        data.address = f.address;
                        if (data.address == '') {
                            $('<div class="errorBlock" style="display: none;">请输入收货地址！</div>').prependTo(h).show('slow');
                            return false;
                        }                        jBox.nextState();  //go forward
                    }                    return false;
                }
            };
            states.state2 = {
                content: html2,
                buttons: { '上一步': -1, '提交': 1, '取消': 0 },
                buttonsFocus: 1, // focus on the second button
                submit: function (v, o, f) {
                    if (v == 0) {
                        return true; // close the window
                    } else if (v == -1) {
                        jBox.prevState() //go back
                    }
                    else {
                        data.message = f.message;
                        jBox.nextState('<div class="msg-div">正在提交...</div>');
                        var msg = [];
                        msg.push('<div class="msg-div">');
                        msg.push('<p>下面是提交的数据</p>');
                        for (var p in data) {
                            msg.push('<p>' + p + ':' + data[p] + '</p>');
                        }
                        msg.push('</div>');
                        window.setTimeout(function () { jBox.nextState(msg.join('')); }, 2000);
                    }                    return false;
                }
            };
            states.state3 = {
                content: '',
                buttons: { } // no buttons
            };
            states.state4 = {
                content: '',
                buttons: { '确定': 0 }
            };
            jBox.open(states, '提交订单', 450, 'auto');
        }

Answer 2

在jBox 显示的html里面使用表单form进行get或者post跳转页面或者使用jquery获取jBox里面的数据向php页面发送ajax请求可以看看jbox的demo把ajax的请求在需要的地方嵌入进去就好了

Answer 3

data.message = f.message;
                        jBox.nextState('<div class="msg-div">正在提交...</div>');
                        var msg = [];
                        msg.push('<div class="msg-div">');
                        msg.push('<p>下面是提交的数据</p>');
                        //这里都写了这么清楚了  叫你在这里提交数据
                        $.post(url,params,function(data){});//这里写ajax请求，如果不会ajax，再自己去百度去
                        for (var p in data) {
                            msg.push('<p>' + p + ':' + data[p] + '</p>');
                        }
                        msg.push('</div>');
                        window.setTimeout(function () { jBox.nextState(msg.join('')); }, 2000);