如何使用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请求。返回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']);
                            }
                    }});
                 });