Сообщение об ошибке AJAX не отображается (сообщение об успешном выполнении) - PullRequest
Новая
       6

Сообщение об ошибке AJAX не отображается (сообщение об успешном выполнении)

0 голосов
/ 16 февраля 2019

ОБНОВЛЕНИЕ: я отправил ниже ответ с кодом, который работает.

Я использую Laravel 5.7.
Я настраиваю поле добавления / удаления динамического ввода с помощью JQUERY / AJAX.

Я новичок в кодировании, и я впервые с JQUERY / AJAX.Все работает, кроме сообщения об ошибке AJAX, которое не отображается при отправке без ввода чего-либо в поле ввода.(в консоли нет ошибок)

Я вижу много похожих вопросов, которые уже задавались, и проверяю / изменяю свой код соответствующим образом, но это не помогает:
- добавьте вместо html
- сообщение об успехе будет первым
- Заголовок JSON присутствует
- Тип = 'json' установлен ...

Что я делаю не так?

Представление 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
    }

Спасибо за помощь

Ответы [ 3 ]

0 голосов
/ 16 февраля 2019

Вам не хватает обработчика ошибок. 

            $.ajax({  
                    url:postURL,  
                    method:"POST",  
                    data:$('#add_name').serialize(),
                    type:'json',
                    success:function(data) {
                      // your code here
                    },
                    error: function(err) {
                    });

Или лучше использовать синтаксис done (), fail (), всегда () 

$.ajax( "example.php" )
  .done(function() {
    alert( "success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "complete" );
  });
0 голосов
/ 18 февраля 2019

На основании этого tuto ниже приведен обновленный код, который работает:

Маршруты: 

Route::get('/create','HomeController@create')->name('create');
Route::get('/index','HomeController@index')->name('index');
Route::post('/store','HomeController@store')->name('store');

Домашний контроллер (обратите внимание на использование валидатора: 

<?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');
    }
}
0 голосов
/ 16 февраля 2019

Вы пробовали что-то подобное? 

$('#submit').click(function () {
    $.ajax({
        url: postURL,
        method: "POST",
        data: $('#add_name').serialize(),
        type: 'json',
        success: function (data) {
            $('.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>');
        },
        error: function (request, status, error) {
            printErrorMsg(request.responseText);
        }
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...