我需要保存表单而不重新加载页面，我已经尝试了所有方法...但是我是Ajax的初学者，我不知道该怎么做。
这是最相关的链接，但是当我按“提交”按钮时，它不起作用。 How to send data without refreshing page in laravel?
我的观点
<!-- 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">×</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
<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");
}
答案 0 :(得分：1)
您的点击事件监听器被错误地声明（您在触发第一个事件之后声明了一个事件监听器，并在“ click”上以两个事件监听器结束），而且您的ajax中的URL可能不正确。
尝试
<script>
$('form').on("submit", function(){
e.preventDefault(); //Prevent page from submiting
var data = new FormData(this);
var url = this.action;
var method = this.method;
$.ajax({
type: method,
url: url,
data: data,
success: function(store) {
},
error: function() {
}
});
});
</script>