0

我将数据存储在 PHP 二维数组中。PHP ARRAY 中的示例值如下所述：

First Element in Array
ID = 1
QUES= <p>ABCD</p>
OPT_A = <p>A</p>
OPT_B = <p>B</p>

Second Element in Array
ID = 2
QUES= <p> TWOABCD </p>
OPT_A = <p>TWA </p>
OPT_B = <p>TWB</p>

我在 HTML FORM 中的 TEXTAREA 中显示 QUEST、OPT_A、OPT_B 的值（使用 TinyMCE jquery 插件来显示富文本）。表格有以下按钮：下一个和上一个。

单击 NEXT 后，我想用数组中下一个元素的数据重新刷新 TEXT AREAS 以获取所有值。根据互联网搜索，我可以使用 AJAX 实现相同的功能，但不确定如何在单击 HTML FORM 中的按钮时同时刷新多个文本区域的数据。另请注意，数据以 HTML 标签的形式存储（最大长度为 4000 个字符）。

目前，我正在使用一种非常古老的方法，即单击表单上的按钮刷新整个页面。它有很多缺点，包括当页面刷新时，用户会在页面完全加载之前看到 HTML 标记。

您能否建议任何参考（解决这两个问题）：

  1. 使用 AJAX 单击按钮（在 HTML-FORM 内）刷新 HTML-FORM 的多个文本中的数据
  2. 避免在页面完全加载之前在文本区域中瞬时显示 HTML 代码。

更新的代码如下所述：

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
    <form>
        <input id="id" type="hidden" name="id">
        <p>Question:</p>
        <p id="myInstance3" style="border: 1px solid #000;"><textarea id="quest" readonly></textarea></p>
        <p>Option A:</p>
        <textarea id="opt_a" ></textarea>
        <p>Option B:</p>
        <textarea id="opt_b" ></textarea>
        <p>
            <button id="previous">Previous</button>
            <button id="next">Next</button>
        </p>
    </form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript"> 
var array = [{"id":1,"quest":"<p>ABC<\/p>","opt_a":"A","opt_b":"B"}, {"id":2,"quest":"<p>DEF<\/p>","opt_a":"1","opt_b":"2"}];
    var ArrayWalker = (function () {
        var _array = null,
            _index = 0,
            _walk  = function (step) {
                if (_array === null) {
                    throw 'Array is not initialized';
                }
                _index += step;
                if (_index < 0 || _index === _array.length) {
                    _index -= step;
                }
                return _array[_index];
            };
        return {
            init: function (array) {
                _array = array;
                _index = 0;
            },
            current: function () {
                return _walk(0);
            },
            next: function () {
                return _walk(1);
            },
            previous: function () {
                return _walk(-1);
            },
            index: function (seek) {
                if (seek !== undefined) {
                    _index = window.parseInt(seek);
                }
                return _index;
            }
        };
    })();

    function fillElements(data) {
        $('#id').val(data['id']);
        $('#quest').val(data['quest']);
        $('#opt_a').val(data['opt_a']);
        $('#opt_b').val(data['opt_b']);
    }

    ArrayWalker.init(array);
    fillElements(ArrayWalker.current());

    $('#previous').click(function (e) {
        e.preventDefault();
        fillElements(ArrayWalker.previous());
    });
    $('#next').click(function (e) {
        e.preventDefault();
        fillElements(ArrayWalker.next());
    });
</script>
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">
     bkLib.onDomLoaded(function() {
          var myNicEditor = new nicEditor();
          myNicEditor.setPanel('myNicPanel');
          myNicEditor.addInstance('myInstance3');
     });
  </script> 
</body>
</html>
4

1 回答 1

1

此方法基于遍历可以通过 AJAX 或直接在页面请求上获取的给定数组。

您可以通过执行以下操作将您的 PHP 数组转换为 Javascript 数组：

// This is your given array
$array = array(
    array(
        'id'    => 1,
        'quest' => '<p>ABC</p>',
        'opt_a' => 'A',
        'opt_b' => 'B',
    ),
    array(
        'id'    => 2,
        'quest' => '<p>DEF</p>',
        'opt_a' => '1',
        'opt_b' => '2',
    ),
);

// This is how you convert it to Javascript
echo 'var array = ', json_encode($array), ';';

输出：

var array = [{"id":1,"quest":"<p>ABC<\/p>","opt_a":"A","opt_b":"B"}, {"id":2,"quest":"<p>DEF<\/p>","opt_a":"1","opt_b":"2"}];

现在您需要一个 Javascript 对象，该对象可以使用该数组来填充您的textarea元素：

var ArrayWalker = (function () {
    var _array = null,
        _index = 0,
        _walk  = function (step) {
            if (_array === null) {
                throw 'Array is not initialized';
            }
            _index += step;
            if (_index < 0 || _index === _array.length) {
                _index -= step;
            }
            return _array[_index];
        };
    return {
        init: function (array) {
            _array = array;
            _index = 0;
        },
        current: function () {
            return _walk(0);
        },
        next: function () {
            return _walk(1);
        },
        previous: function () {
            return _walk(-1);
        },
        index: function (seek) {
            if (seek !== undefined) {
                _index = window.parseInt(seek);
            }
            return _index;
        }
    };
})();

假设这个标记：

<form>
    <input id="id" type="hidden" name="id" />
    <p>Question:</p>
    <textarea id="quest"></textarea>
    <p>Option A:</p>
    <textarea id="opt_a"></textarea>
    <p>Option B:</p>
    <textarea id="opt_b"></textarea>
    <p>
        <button id="previous">Previous</button>
        <button id="next">Next</button>
    </p>
</form>

此函数将填充元素：

function fillElements(data) {
    $('#id').val(data['id']);
    $('#quest').val(data['quest']);
    $('#opt_a').val(data['opt_a']);
    $('#opt_b').val(data['opt_b']);
}

最后，您需要使用工具来完成工作：

ArrayWalker.init(array);
fillElements(ArrayWalker.current());

$('#previous').click(function (e) {
    e.preventDefault();
    fillElements(ArrayWalker.previous());
});
$('#next').click(function (e) {
    e.preventDefault();
    fillElements(ArrayWalker.next());
});

这是一个工作演示。

于 2013-10-16T15:36:52.073 回答