Php 如何在不重新加载页面的情况下提交表格？

我需要在不重新加载页面的情况下保存我的表单，我已经尝试了所有的方法……但是我是Ajax的初学者，我不知道如何做到这一点

这是最相关的链接，但当我按下提交按钮时，它不起作用。

我的观点

                                                    <!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="top: 50px">
      <div class="modal-header" style="border-bottom: none">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container">
    <div class="row">
        <section>
        <div class="wizard col-md-6" style="right: 5px;margin: 0px auto">
            <div class="wizard-inner">
                <div class="connecting-line"></div>
                <ul class="nav nav-tabs" role="tablist" style="margin: 0px auto">

                    <li role="presentation" class="active">
                        <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
                            <span class="round-tab">
                                <i class="icon-pencil"></i>
                            </span>
                        </a>
                    </li>

                    <li role="presentation" class="disabled">
                        <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
                            <span class="round-tab">
                                <i class="icon-note"></i>
                            </span>
                        </a>
                    </li>
                    <li role="presentation" class="disabled">
                        <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
                            <span class="round-tab">
                                <i class="icon-check"></i>
                            </span>
                        </a>
                    </li>


                </ul>
            </div>

            <form role="form" action="{{ action('CareerSolutionController@careerReport') }}" method="post">
                                        <input type="hidden" name="_token" value="{{ csrf_token() }}"> 
                                        <input type="hidden" name="user_id"  value="{{ Sentinel::check()->id }}">
                                        <input type="hidden" name="user_id_posted" value="{{ $career_solution->user->id }}">
                                        <input type="hidden" name="career_solution_id" value="{{ $career_solution->id}} ">

                <div class="tab-content">
                    <div class="tab-pane active" role="tabpanel" id="step1">
                        <h3>Why are you reporting this content :</h3>

                        <ul style="list-style: none">
  <li>

    <input type="radio" id="box-9" name="why_reporting" value="Spam">
    <label for="box-9">Spam</label>

    <div class="check"></div>
    <small id="box-9-s" style="display: none">I consider this content irrelevant and annoying.</small>
  </li>

  <li>
    <input type="radio" id="box-10" name="why_reporting" value="Fake Profile">
    <label for="box-10">Fake Profile</label>

    <div class="check"><div class="inside"></div></div>
    <small id="box-10-s" style="display: none">This content was posted by way of a profile that clearly doesn't represent a real person.
</small>
  </li>

  <li>
    <input type="radio" id="box-11" name="why_reporting" value="Advertising">
    <label for="box-11">Advertising</label>

    <div class="check"><div class="inside"></div></div>
    <small id="box-11-s" style="display: none">This content is or contains advertising.
</small>
  </li>
   <li>
    <input type="radio" id="box-12" name="why_reporting" value="Untrustworthy source">
    <label for="box-12">Untrustworthy source</label>

    <div class="check"><div class="inside"></div></div>
    <small id="box-12-s" style="display: none">This content is from an untrustworthy source and contains unverifiable statements.
</small>
  </li>
  <li>
    <input type="radio" id="box-13" name="why_reporting" value="Defamatory">
    <label for="box-13">Defamatory</label>

    <div class="check"><div class="inside"></div></div>
    <small id="box-13-s" style="display: none">The reported content is insulting or defamatory to me or other people.
</small>
  </li>
  <li>
    <input type="radio" id="box-14" name="why_reporting" value="Violence or pornography">
    <label for="box-14">Violence or pornography</label>

    <div class="check"><div class="inside"></div></div>
    <small id="box-14-s" style="display: none">This content contains violence or pornography.
</small>
  </li>
  <li>
    <input type="radio" id="box-15" name="why_reporting" value="Violates IP rights">
    <label for="box-15">Violates IP rights</label>

    <div class="check"><div class="inside"></div></div>
    <small id="box-15-s" style="display: none">This content includes third-party content (e.g. an image) posted under their own name.
</small>
  </li>
  <li>
    <input type="radio" id="box-16" name="why_reporting" value="Promotes structural distribution measures">
    <label for="box-16">Promotes structural distribution measures</label>

    <div class="check"><div class="inside"></div></div>
    <small id="box-16-s" style="display: none">This content promotes a chain distribution system, multilevel selling or pyramid sales.
</small>
  </li>
  <li >
    <input type="radio" id="box-17" name="why_reporting" value="Other">
    <label for="box-17" id="other">Other</label>

    <div class="check"><div class="inside"></div></div>
     <div class="form-group" id="mydiv" style="display: none">
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Please let us know why you're reporting this content:
" style="resize: none" name="why_reporting_message"></textarea>
  </div>
  </li>
</ul>


                        <ul class="list-inline pull-right">
                            <li><button style="background-color: #18ba9b;border-color: white" type="button" class="btn btn-primary next-step">Save and continue</button></li>
                        </ul>
                    </div>
                    <div class="tab-pane" role="tabpanel" id="step2">
                        <h3>Why would you like to report this?</h3>
                        <div class="form-group">
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" style="resize: none" placeholder="
Please let us know why you're reporting this content:" name="additional_message"></textarea>
  </div>
                        <ul class="list-inline pull-right">
                            <li><button type="button" class="btn btn-default prev-step">Previous</button></li>
                            <li><button type="button" class="btn btn-default next-step">Skip</button></li>
                            <li><button style="background-color: #18ba9b;border-color: white" type="button" class="btn btn-primary btn-info-full next-step" id="save">Submit your report</button></li>
                        </ul>

                    </div>
                    <div class="tab-pane" role="tabpanel" id="step3">
                        <h2 class="title-box-v2" style="font-size: 17px !important;line-height: 35px">We'll look into this as soon as possible. Thanks for helping us improve the quality of content on Workstickers.</h2>
                        <p style="text-align: center">You have successfully completed all steps.Flagged content and users are reviewed by Workstickers staff 24 hours a day, seven days a week to determine whether they violate Community Guidelines. Accounts are penalized for Community Guidelines violations, and serious or repeated violations can lead to account termination.
</p>
<div style="text-align: center;margin-top: 50px">If you've changed your mind -  <a href="#" style="text-decoration: underline;color: #18ba9b;font-weight: 700">Cancel report</a></div>
                    </div>

                    <div class="clearfix"></div>
                </div>
            </form>
        </div>
    </section>
   </div>
</div>
      </div>

    </div>
  </div>
</div>



                                <!-- END MY MODAL -->

---

您的单击事件侦听器声明错误（您在触发第一个事件后声明了一个事件侦听器，最后在“单击”时声明了两个事件侦听器），而且您的ajax中可能有错误的url

试试这个

$（'form'）。在（“提交”，函数（）上）{
e、 preventDefault（）；//防止页面提交
var数据=新的FormData（本）；
var url=this.action；
var方法=此方法；
$.ajax({
类型：方法，
url:url，
数据：数据，
成功：功能（商店）{
},
错误：函数（）{
}
});
});

Nah，所以。如果我的按钮

type=“submit”

，我会被重定向到404页面，但如果它是

type=“button”

，则不会在我的数据库中加载任何内容：（@AndreiNagy它可以正常使用

type=“submit”

。即使在JSFIDLE中，当您从警报中单击“确定”时，也会收到404错误。我是否应该在控制器中修改某些内容？返回时？@AndreiNagy您是否为该控制器方法声明了路由？是的，这里：

route:：post（'career_report'，'CareerSolutionController@careerReport）；

    <script>
        $(document).on("click",".save",function(){
    e.preventDefault(); //Prevent page from submiting
    $(document).on("click", ".save", function() {
    $.ajax({
        type: "post",
        url: 'career_report',
        data: $(".why_reporting").serialize(),
        success: function(store) {

        },
        error: function() {
        }
    });
});
}); 
        </script>

 public function careerReport(requ $request)
    {

        $report = \App\Reports::create([
                        'user_id' => $request['user_id'],
                        'user_id_posted' => $request['user_id_posted'],
                        'career_solution_id' =>$request['career_solution_id'],
                        'why_reporting' =>$request['why_reporting'],
                        'why_reporting_message' =>$request['why_reporting_message'],
                        'additional_message' =>$request['additional_message'],

                    ]);


        if($report != ""){
            flash('Career solution report submited', 'success');
        }else{
            flash('Career solution report', 'warning');
        }

        return Redirect('career_report')->with('message',"success");


    }