代码之家  ›  专栏  ›  技术社区  ›  gbenga wale

自定义sweetalert2输出原始json

  •  2
  • gbenga wale  · 技术社区  · 7 年前

    the JSON format of the message display 如果注册成功或失败,我想显示一条sweetalert消息(我在jquery文件中编写了SweetAlart代码),并将其包含在注册视图页面中(它包含在所有页面扩展的master.blade.php中),但它不显示SweetAlter错误或成功消息,而是一直显示解析的json格式消息。

    自定义文件.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');
                });
        });
    

    @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;
        }
    
    }
    
    1 回复  |  直到 7 年前
        1
  •  0
  •   Nicholas Kajoh    7 年前

    以下是一些测试代码:

    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));