如何通过此方法使用 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 将阻止表单以默认行为提交。

Answer 2

好的，如果您询问如何通过 ajax 提交表单，那么这里是一个示例-

        $(document).on("click", ".submit", function () {
             $.ajax({
                    type: "POST",
                    url: "your/url",
                    data: {your:data},
                    success: function(data) {

   //and from data parse your json data and show error message in the modal
                    var obj = $.parseJSON(data);
                        if(obj!=null)
                            {                             
                                $('#mssg').html(obj['message']);
                            }
                    }});
                 });