jquery - 未显示 AJAX 错误消息(成功消息有效)
问题描述
更新:我在下面发布了一个有效代码的答案。
我正在使用 Laravel 5.7。
我正在使用 JQUERY/AJAX 设置添加/删除动态输入字段。
我是编码初学者,这是我第一次使用 JQUERY/AJAX。除了没有在输入字段中输入任何内容的情况下提交时不显示的 AJAX 错误消息外,一切正常。(控制台没有错误)
我看到很多类似的问题已经问过,并相应地检查/更改了我的代码,但这没有帮助:
- 追加 html
- 首先是成功消息
- JSON Header 存在
- Type='json'is set...
我究竟做错了什么?
视图 create.blade.php:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div class="container">
<div class="form-group">
<form name="add_name" id="add_name">
<div class="alert alert-danger print-error-msg" style="display:none">
<ul></ul>
</div>
<div class="alert alert-success print-success-msg" style="display:none">
<ul></ul>
</div>
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var postURL = '/store';
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#submit').click(function(){
$.ajax({
url:postURL,
method:"POST",
data:$('#add_name').serialize(),
type:'json',
success:function(data)
{
if(data.error){
printErrorMsg(data.error);
}else{
i=1;
$('.dynamic-added').remove();
$('#add_name')[0].reset();
$(".print-success-msg").find("ul").html('');
$(".print-success-msg").css('display','block');
$(".print-error-msg").css('display','none');
$(".print-success-msg").find("ul").append('<li>Record Inserted Successfully.</li>');
}
}
});
});
function printErrorMsg (msg) {
$(".print-error-msg").find("ul").html('');
$(".print-error-msg").css('display','block');
$(".print-success-msg").css('display','none');
$.each( msg, function( key, value ) {
$(".print-error-msg").find("ul").append('<li>'+value+'</li>');
});
}
});
</script>
</body>
</html>
路线:
Route::get('/create','HomeController@create')->name('create');
Route::get('/index','HomeController@index')->name('index');
Route::post('/store','HomeController@store')->name('store');
控制器:
public function store(Request $request)
{
foreach($request->input('name') as $key => $value) {
TagList::create(['name'=>$value]);
}
//return redirect ('index');
//Javascript code (JQUERY-AJAX) is returning the create view with ajax messages
}
谢谢你的帮助
解决方案
基于这个tuto,下面是更新的代码,它有效:
路线:
Route::get('/create','HomeController@create')->name('create');
Route::get('/index','HomeController@index')->name('index');
Route::post('/store','HomeController@store')->name('store');
Home Controller(请注意验证器的使用:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\TagList;
use Validator; //using the validator
class HomeController extends Controller
{
public function create()
{
return view('create');
}
public function index()
{
$tags = TagList::all();
return view ('index')->with('tags', $tags);
}
public function store(Request $request)
{
$rules = [];
foreach($request->input('name') as $key => $value) {
$rules["name.{$key}"] = 'required';
}
$validator = Validator::make($request->all(), $rules);
if ($validator->passes()) {
foreach($request->input('name') as $key => $value) {
TagList::create(['name'=>$value]);
}
return response()->json(['success'=>'done']);
}
return response()->json(['error'=>$validator->errors()->all()]);
}
}
创建视图:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body>
<div class="container">
<div class="form-group">
<form name="add_name" id="add_name">
<div class="alert alert-danger print-error-msg" style="display:none">
<ul></ul>
</div>
<div class="alert alert-success print-success-msg" style="display:none">
<ul></ul>
</div>
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
var postURL = '/store';
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td><input type="text" name="name[]" placeholder="Enter your Name" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$('#submit').click(function(){
$.ajax({
url:postURL,
method:"POST",
data:$('#add_name').serialize(),
type:'json',
success:function(data)
{
if(data.error){
printErrorMsg(data.error);
}else{
i=1;
$('.dynamic-added').remove();
$('#add_name')[0].reset();
$(".print-success-msg").find("ul").html('');
$(".print-success-msg").css('display','block');
$(".print-error-msg").css('display','none');
$(".print-success-msg").find("ul").append('<li>Record Inserted Successfully.</li>');
}
}
});
});
function printErrorMsg (msg) {
$(".print-error-msg").find("ul").html('');
$(".print-error-msg").css('display','block');
$(".print-success-msg").css('display','none');
$.each( msg, function( key, value ) {
$(".print-error-msg").find("ul").append('<li>'+value+'</li>');
});
}
});
</script>
</body>
</html>
模型:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class TagList extends Model
{
public $table = "tagslist";
public $fillable = ['name'];
}
移民:
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateTagslistTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('tagslist', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('tagslist');
}
}
推荐阅读
- ios - 如何在 swift 中使基类属性通用,以便与多种模型类型一起使用?
- python - 有太多 uwsgi OSError 消息
- python - 为什么我不能正确使用 pandas.DataFrame.plot.bar()?
- node.js - 如何使用 NodeGit 列出所有文件?(相当于'git ls-files')
- javascript - 如何在 React JS 中遍历地图
- r - 在 Linux 上的 Rstudio 中绘制图形时出错。PangoCairo_Text 中的无效字符串
- javascript - Angular Dialog 更改总是覆盖 UI
- python - 如何在 python 上替换 dt.datatable 上的整列值?
- firebase - @typescript-eslint/no-misused-promises 和 new Promise(() => return resolve())
- android - 如何在 CoroutineWorker 中获取 WorkRequest Id