自定义 sweetalert2 输出原始 json

Question

如果注册成功或失败，我想显示一条 sweetalert 消息（我在 jquery 文件中编写了 sweetalert 代码）并将其包含在注册视图页面中（它包含在所有页面的 master.blade.php extend) 但它没有显示 sweetalert 错误或成功消息，而是继续显示已解析的 json 格式消息。

这些是创建的文件。

custom_file.js

$(document).ready(function () {

    var form = $('#registration');

    form.submit(function (e) {
        e.preventDefault();

        $.ajax({
                url: form.attr('action'),
                type: "POST",
                data: form.serialize(),
                dataType: "json"
            })
            .done(function (response) {
                if (response.success) {
                    swal({
                        title: "Hi " + response.name,
                        text: response.success,
                        timer: 5000,
                        showConfirmButton: false,
                        type: "success"
                    });

                    window.location.replace(response.url);

                } else {
                    swal("Oops!", response.errors, 'error');
                }
            })
            .fail(function () {
                swal("Fail!", "Cannot register now!", 'error');
            });
    });

registraion.blade.php 文件

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">AJAX Register</div>
                    <div class="panel-body">
                        <form class="form-horizontal" id="registration" method="POST" action="{{ url('users/register') }}" data-parsley-validate="">
                            {!! csrf_field() !!}

                            <div class="form-group">
                                <label class="col-md-4 control-label">Name</label>

                                <div class="col-md-6">
                                    <input type="text" class="form-control" name="name" id="name" required="">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-4 control-label">E-Mail Address</label>

                                <div class="col-md-6">
                                    <input type="email" class="form-control" name="email" id="email" required="">

                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-4 control-label">Password</label>

                                <div class="col-md-6">
                                    <input type="password" class="form-control" name="password" id="password" required="">

                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-4 control-label">Confirm Password</label>

                                <div class="col-md-6">
                                    <input type="password" class="form-control" name="password_confirmation" id="password_confirmation" data-parsley-equalto="#password" required="">
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-6 col-md-offset-4">
                                    <button type="submit" class="btn btn-primary ladda-button" data-style="expand-left" data-size="s" data-color="green">
                                        <i class="fa fa-btn fa-user"></i> Register
                                    </button>
                                    <a href="{!! asset('login/facebook') !!}"> <div class="btn btn-md btn-primary ladda-button" data-style="expand-left" data-size="s" data-color="blue"> <i class="fa fa-facebook"></i> Login with Facebook </div></a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

这是 RegisterController.php 脚本

public function postRegister(Request $request)
    {

        $validator = Validator::make($request->all(), [
            'email' => 'required|email|unique:users,email',
            'name' => 'required|min:2',
            'password' => 'required|alphaNum|min:6|same:password_confirmation',
        ]);

        if ($validator->fails()) {
            $message = ['errors' => $validator->messages()->all()];
            $response = Response::json($message, 202);
        } else {

            // Create a new user

            $user = new User([
                'name' => $request->name,
                'email' => $request->email,
                'password' => $request->password,
                'facebook_id' => $request->email
            ]);
            $user->save();

            Auth::login($user);

            $message = ['success' => 'Thank you for joining us!', 'url' => '/', 'name' => $request->name];
            $response = Response::json($message, 200);
        }
        return $response;
    }

}

Answer 1

下面是一些测试代码：

index.php

<!DOCTYPE html>
<html>
<head>
  <title>SweetAlert2 test</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.css">
</head>
<body>
  <form id="myForm" method="post" action="ajax.php">
    <input type="text" name="uname">
    <input type="submit" value="Submit">
  </form>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.5/sweetalert2.min.js"></script>
  <script>
    $(document).ready(function () {

      var form = $('#myForm');

      form.submit(function (e) {
        e.preventDefault();

        $.ajax({
            url: form.attr('action'),
            type: "POST",
            data: form.serialize(),
            dataType: "json"
          })
          .done(function (response) {
            if (response.data) {
              swal({
                title: "Message",
                text: response.data,
                timer: 5000,
                showConfirmButton: false,
                type: "success"
              })
              .then(function() {}, function() {
                // redirect after alert has been displayed
                window.location.replace("https://google.com");
              });
            } else {
              swal("Oops!", "Registration error!", 'error');
            }
          })
          .fail(function () {
            swal("Fail!", "Network/Server error!", 'error');
          });
      });
    });
  </script>
</body>
</html>

ajax.php

<?php
  $user = isset($_POST['uname']) ? $_POST['uname'] : "Anonymous";
  $myJson = ["data" => "Hi " . $user . "! Thank you for joining us!"];
  echo(json_encode($myJson));

这很好用！将其与您的代码进行比较，看看是否有错误。

自定义 sweetalert2 输出原始 json

customize sweetalert2 outputting raw json

javascript

laravel-5

sweetalert

laravel-5.4

sweetalert2