我想使用AJAX提交表单。但是它在控制台中显示错误Uncaught ReferenceError: displayData is not defined。
此外，我想在提交表单时在同一刀片上显示提交的数据。为此，我在刀片中添加了Jquery，该刀片也无法正常工作。有什么方法可以使用AJAX调用保存数据，并在提交表单时将提交的数据显示在同一刀片中。并显示此刀片上的第二种形式。因为我使用过smartWizard来保存来自不同Forms的数据。
这里是Blade。
@extends('layouts.master')
@section('content')
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<style type="text/css">
#display{
display: none;
}
</style>
<div class="main-content-wrap sidenav-open d-flex flex-column">
<div class="col-md-12 " id="display">
<div class="card" style="margin-bottom: 10px;">
<div class="tab-content" id="myTabContent">
<div id="print-area">
<div class="row">
<div class="col-md-6">
<h4 class="font-weight-bold">Order Info</h4>
<p id="orderNoDis">{{ $sale->orderNo }}</p>
</div>
</div>
<div class="mt-3 mb-4 border-top"></div>
<div class="row mb-5">
<div class="col-md-6 mb-3 mb-sm-0">
<h5 class="font-weight-bold">Bill From</h5>
<p id="billFromDis">{{ $sale->billFrom }}</p>
</div>
<div class="col-md-6 text-sm-right">
<h5 id="billToDis" class="font-weight-bold">Bill To</h5>
<p>{{ $sale->billTo }}</p>
<span id="billToAddressDis" style="white-space: pre-line">
{{ $sale->billToAddress }}
</span>
<span id="billToPhoneDis" style="white-space: pre-line">
{{ $sale->billToPhone }}
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- SmartWizard html -->
<div id="smartwizard">
<div>
<div id="step-1" class="">
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
@if(session()->has('message'))
<p class="alert alert-danger">{{ session('message') }}</p>
@endif
<div class="tab-pane fade show active">
<!--==== Edit Area =====-->
<form action="{{ route('sale.store') }}" method="post" id="formToSubmit">
@csrf
<div class="row mb-5">
<div class="col-md-6">
<h5 class="font-weight-bold">Bill From</h5>
<div class="col-md-10 form-group mb-3 pl-0">
<input type="text" class="form-control" name="bill_from" id="bill_from" placeholder="Bill From" required>
</div>
</div>
<div class="col-md-6 text-right">
<h5 class="font-weight-bold">Bill To</h5>
<div class="col-md-10 offset-md-2 form-group mb-3 pr-0">
<input type="text" class="form-control text-right" name="bill_to" id="bill_to" placeholder="Bill From" required>
</div>
<div class="col-md-10 offset-md-2 form-group mb-3 pr-0">
<textarea class="form-control text-right" name="bill_to_address" id="bill_to_address" placeholder="Bill From Address" required></textarea>
</div>
<div class="col-md-10 offset-md-2 form-group mb-3 pr-0">
<input type="number" class="form-control text-right" name="bill_to_phone" id="bill_to_phone" placeholder="Bill From Phone No" required>
</div>
<div class="col-md-10 offset-md-2 form-group mb-3 pr-0">
<a class="btn btn-primary" id="dataShow" onclick="displayData()">Save</a>
</div>
</div>
</div>
</form>
<!--==== / Edit Area =====-->
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#formToSubmit').submit(function (e) {
e.preventDefault();
function displayData()
{
$.ajaxSetup({
headers: {
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
}
});
var bill_from_val = $('#bill_from').val();
var bill_to_val = $('#bill_to').val();
var bill_to_address_val = $('#bill_to_address').val();
var bill_to_phone_val = $('#bill_to_phone').val();
$.ajax({
url: 'http://localhost:8000/sale/store', // URL
type: 'POST',
data: { // here we are sending data to next request
_token: CSRF_TOKEN,
billFrom: bill_from_val,
billTo: bill_to_val,
billToAddress: bill_to_address_val,
billToPhone: bill_to_phone_val,
// user_id: user_id
},
dataType:'JSON',
success: function (result){
if( result.success == 'true ')
{
var data = result.data;
$('#billFromDis').text(data.billFrom);
$('#billToDis').text(data.billTo);
$('#billToAddressDis').text(data.billToAddress);
$('#billToPhoneDis').text(data.billToPhone);
}
}
});
};
});
});
</script>
<script>
$(document).ready(function(){
$("#dataShow").click(function(){
$("div").removeClass("display");
});
});
</script>
@stop
这是控制器代码。
$validator = Validator::make($request->all(), [
'order_no' => 'unique:sales,orderNo',
'bill_from' => 'required|min:3',
'bill_to' => 'required|min:3',
'bill_to_address' => 'required',
'bill_to_phone' => 'required|min:11'
]);
if ($validator->fails()) {
if($request->ajax())
{
return response()->json(array(
'success' => false,
'message' => 'There are incorect values in the form!',
'errors' => $validator->getMessageBag()->toArray()
), 422);
}
$this->throwValidationException(
$request, $validator
);
}
$sale = new Sale();
$sale['orderNo'] = mt_rand();
$sale['billFrom'] = $request->bill_from;
$sale['billTo'] = $request->bill_to;
$sale['billToAddress'] = $request->bill_to_address;
$sale['billToPhone'] = $request->bill_to_phone;
$sale->save();
//return redirect()->route('saleCreate2');
$request->session()->flash('status', 'Task was successful!');
json_encode(array('success' => 'true', 'data' => $sale));
告诉我我做错了。预先感谢。
答案 0 :(得分：0)
最好在表单中放置一个id，然后将ajax代码放入Submit函数中。例如下面的
：<form id="formToSubmit">
</form>
<script>
$(document).ready(function () {
$('#formToSubmit').submit(function (e) {
e.preventDefault(); // To prevent reloading the page or redirecting the page
$.ajaxSetup({
headers: {
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');
}
});
var bill_from_val = $('#bill_from').val();
var bill_to_val = $('#bill_to').val();
var bill_to_address_val = $('#bill_to_address').val();
var bill_to_phone_val = $('#bill_to_phone').val();
$.ajax({
url: 'http://localhost:8000/sale/store', // URL
type: 'POST',
data: { // here we are sending data to next request
_token: CSRF_TOKEN,
billFrom: bill_from_val,
billTo: bill_to_val,
billToAddress: bill_to_address_val,
billToPhone: bill_to_phone_val,
// user_id: user_id
},
dataType:'JSON',
success: function (result){
if( result.success == 'true ')
{
var data = result.data;
$('#billFromDis').text(data.billFrom);
$('#billToDis').text(data.billTo);
$('#billToAddressDis').text(data.billToAddress);
$('#billToPhoneDis').text(data.billToPhone);
}
}
});
});
});
</script>