javascript - 我试图通过 ajax 将自己的数据附加到提交的表单中，但提交没有通过

Question

我使用 jquery 动态创建了一个调查表单，我想通过 ajax 提交表单并将我自己的数据附加到它。我这样做是因为创建的调查中有问题，每个问题都有一定数量的答案。但是，如果您只是提交表单，您会得到一系列问题和一系列答案，但无法判断哪个答案属于哪个问题。为了解决这个问题，我尝试创建自己的数组，或者更确切地说是一个地图，其中问题是关键，每个问题都有自己的答案作为值。我没有找到更好的方法来实现这一点，只使用 ajax 来更改提交。正如标题所暗示的那样，这不起作用，只是没有通过，没有错误消息。

$('.survey').submit(function(event){
    event.preventDefault();
    var map = new Array();
    var q;
    var form = $(this);
    $('div[name="question"]').each(function(){
        q = $(this).find('.question')[0].value;
        map["q"] = new Array();
        $(this).find('.answer').each(function(){
            map["q"].push($(this).val()+"");
        });
    });
    var data = form.serializeArray();
    data["questions"] = JSON.stringify(map);
    $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: data
        });
});

那是有问题的代码不起作用，这是整个程序的 jsfiddle：https ://jsfiddle.net/e9tbcwdj

一切正常，除了提交。当我没有对我的地图进行字符串化时，我可以通过警报看到地图已成功附加到数据，并且数据 [“questions”][“q”][0]，例如，显示了预期的结果。这就是为什么我很确定问题出在序列化上，但我不确定如何序列化我的“地图”，因为 stringify 没有完成这项工作。说到序列化，我总是有点无奈。我应该使用地图功能吗？

标签： javascriptjqueryajax

Answer 1

除了在你的表单中使用类使用 id

      var form = $('#surveyForm');

在你的 html 表单中添加这个 id

      <form method="POST" action="<?=base_url()?>start" class="survey" id="surveyForm">
        <input type="hidden" name="action" value="add">
        <input type="button" class="addQst" value="Add question">
        <input type="submit" class="submitForm" value="Generate">
      </form>

并为您的问题和答案输入命名

      var question = $('<input type="text" class="question" name="quest">');
      var answer = $('<input type="text" class="answer" name="answr">');

完整代码

    $(document).ready(function () {
        $('.survey').submit(function(event){
            event.preventDefault();
            var map = new Array();
            var q;
            var form = $('#surveyForm');
            $('div[name="question"]').each(function(){
                q = $(this).find('.question')[0].value;
                map["q"] = new Array();
                $(this).find('.answer').each(function(){
                    map["q"].push($(this).val()+"");
                });
            });
            var data = form.serializeArray();
            console.log(data)
            data["questions"] = JSON.stringify(map);
            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                data: data
            });
        });
        $('.addQst').click(function () {
            var wrapperQuestion = $('<div name="question">');
            var removeQuestion = $('<input type="button" class="rmvQst" value="Delete">');
            var question = $('<input type="text" class="question" name="quest">');
            var addAnswer =$('<input type="button" class="addAsw" value="Add answer">');
            addAnswer.click(function() {
                var wrapperAnswer = $('<div>');
                var answer = $('<input type="text" class="answer" name="answr">');
                var removeAnswer = $('<input type="button" class="rmvAsw" value="Delete">');
                removeAnswer.click(function() {
                    $(this).parent().remove();
                });
                wrapperAnswer.append(answer);
                wrapperAnswer.append(removeAnswer);
                $(this).before(wrapperAnswer);
            });
            removeQuestion.click(function() {
                $(this).parent().remove();
            });
            wrapperQuestion.append(question);
            wrapperQuestion.append(removeQuestion);
            wrapperQuestion.append($('<div>').append(addAnswer));
            $(this).before(wrapperQuestion);
        });
    });

希望这会有所帮助

新更新的答案

        $('.survey').submit(function(event){
            event.preventDefault();
            var map = new Array();
            var q;
            var form = $('#surveyForm');
            $('div[name="question"]').each(function(){
                q = $(this).find('.question')[0].value;
                q = [];
                $(this).find('.answer').each(function(){
                    q.push($(this).val()+"");
                });
                map.push(q)
            });
            var data = form.serializeArray();
            data["questions"] = JSON.stringify(map);
            console.log(data["questions"])
            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                data: data
            });
        });