javascript - 如何使用Ajax通过此方法发送查询

Question

我无法以这种方式发送 Ajax 请求找到适合该网站的形式 https://github.com/codrops/MinimalForm 并尝试在不刷新页面的情况下发送数据我究竟做错了什么？需要类似 form.submit(){} 的东西吗？

表格

<form id="theForm" class="simform" autocomplete="off">
                <div class="simform-inner">
                    <ol class="questions">
                        @foreach($answers as $answer)
                    <li>
                        <span><label for="q">{{ $answer->answer }}</label></span>
                        <label class="checkbox" for="checkbox1" style="display:none;">
                            <input type="checkbox" value="{{$answer->id}}" id="checkbox1" checked name="id"  data-toggle="checkbox" >
                        </label>
                        <input id="q" name="word" type="text"/>
                    </li>
                @endforeach
                    </ol><!-- /questions -->
                    <button class="submit" type="submit">Send answers</button>

            </form><!-- /simform -->    

js

<script src="/tests/js/classie.js"></script>
<script src="/tests/js/stepsForm.js"></script>
<script>
    var theForm = document.getElementById( 'theForm' );

    new stepsForm( theForm, {
        onSubmit : function( form ) {
            // hide form
            classie.addClass( theForm.querySelector( '.simform-inner' ), 'hide' );
            var query = "word=" + $("input[name=word]").val() +
                    "&id=" + $("input[name=id]").val();
            $.ajax({
                type: "POST",
                url : "http://example.com/frontend/tests/elementary-2/check",
                data : query,
                cache: false,

                dataType : "json",

                success : function(msg){console.log(msg);

                    if (msg['msg'] == true){
                        sweetAlert("Good job!", "some", "success");
                    }else {
                        sweetAlert("Oops...", "some", "error");
                    }

                }

            });

        }
    } );
</script>

Answer 1

在表单中输入 return false

<form id="theForm" class="simform" autocomplete="off" onsubmit="return false;">

您的 ajax 实际上正在执行，但默认情况下表单也会发出非 ajax 请求。 return false 将阻止表单以默认行为提交。