我尝试通过 ajax 将我自己的数据 append 提交到提交的表单，但提交没有通过

Question

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

$('.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

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

Answer 1

除了使用 class 之外，请以您的形式使用 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
            });
        });

Answer 2

谢谢你 sayalok 因为我而经历的所有麻烦，但我现在遇到了我的问题：我的代码工作正常。 I put a var_dump on the php page I was posting to, but because I used ajax and never changed pages, just posted to the php page, I never saw the var_dump and therefore thought, the submit didn't go through. 不过，还是感谢您的帮助。