Armin Rahmati
4 سال پیش توسط Armin Rahmati مطرح شد
2 پاسخ

لاگین کردن در لاراول با استفاده از ایجکس

سلام.
دوستان من میخوام یه صفحه لاگین شبیه دیجیکالا طراحی کنم.
به این صورت که کاربر ابتدا باید کد ملی خود را وارد کند و اگر صحیح بود، input پسورد نمایش داده شود و وقتی پسورد هم به درستی وارد کرد به صفحه موردنظر هدایت شود.
میخوام این کار به صورت ajax انجام شود.
یه سری کدها نوشتم ولی نمیدونم الان مشکل از کجاست. در واقع اگر input کدملی خالی باشد به مرحله بعد میرود و همچنین اگر کدملی و پسورد هم درست باشد دوباره به صفحه لاگین برمیگردد.
ممنون میشم راهنمایی کنید.

کدهای ویو

<div id="loginContainer" class="container">

        <div  id="cardlogin" class="card"  style="width:300px;">
            <div class="card-header">
            realestate
                    </div>

            <div class="card-body">
                <h4 class="card-title">ورود / ثبت نام</h4>
                <p class="card-text">کد ملی خود را وارد کنید</p>
                <form id="form-data" >

                    <div class="form-group row">
                        <div class="col-6">
                    <input id="textID" type="text" name="idNumber" placeholder="کد ملی خود را وارد کنی">
                        </div>
                    </div>
                    <div class="form-group row mb-0">
                        <div class="col-md-8 offset-md-4">
                    <input type="submit" name="submit" id="submit" class="btn btn-primary">
                        </div>
                    </div>
                </form>
            </div>
    </div>
        </div>
    <div id="loginContainer2" class="container" style="visibility: hidden">
            <div  id="cardpassword" class="card"  style="width:300px;">
                <div class="card-header">
                    realestate
                </div>

                <div class="card-body">
                    <h4 class="card-title">رمز عبور را وارد کنید</h4>
                    <p class="card-text">رمز عبور حساب کاربری خود را وارد کنید</p>
                    <form  >
                        <div class="form-group row">
                            <div class="col-6">
                                <input id="textid2" type="text" name="idNumber" placeholder="کد ملی خود را وارد کنی">
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-6">
                                <input id="textpassword" type="password" name="password" placeholder="زمز عبور خود را وارد کنی">
                            </div>
                        </div>
                        <div class="form-group row mb-0">
                            <div class="col-md-8 offset-md-4">
                                <input type="submit" name="submit" id="submitpassword" class="btn btn-primary">
                            </div>
                        </div>
                    </form>
                </div>
                </div>
    </div>
            <script type="text/javascript">
                $(document).ready(function () {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $('#submit').click(function(e){
                        e.preventDefault();
                       var idNumber=$("input[name=idNumber]").val();
                        $.ajax({
                            type: "POST",
                            url:"{{route('InputLogin.post')}}",
                           data:{idNumber:idNumber },

                            success:function(data)
                            {

                                    $('#cardlogin').css('visibility', 'hidden');
                                    $('#loginContainer2').css('visibility', 'visible');

                            }
                        });
                    });
                });
            </script>

@endsection

کدهای روت

Route::get('InputLogin','Auth\LoginController@ajaxRequest');
Route::post('InputLogin','Auth\LoginController@CheckUsername')->name('InputLogin.post');

کدهای کنترلر

public function username()
    {
        return 'idNumber';
    }
    public function ajaxRequest()
    {
        return view('auth.login');
    }
    public  function CheckUsername(Request $request)

    {
$data=$request->all();
        dd($data);
        $users=DB::table('users')->where('idNumber',$data)->first();
       dd($users);
        if($users!='')
        {

                return response()->json($data->idNumber,200);

      }
        else
        {
            return  view("auth.register");
       }
    }

ثبت پرسش جدید
محمدحسن یگانه
تخصص : Full-Stack Web Developer Freel...
@mhyeganeh 4 سال پیش آپدیت شد
2

خوب شما که هیچ validation ی نذاشتید قبل از ارسال درخواست Ajax. اول چک کنید اگر موبایل وارد نشده بود یا تعداد کاراکترهاش درست نبود یا ... یک ارور بدید و جلوی درخواست Ajax رو بگیرید. مثلا اینجوری:

<script type="text/javascript">
                $(document).ready(function () {
                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });
                    $('#submit').click(function(e){
                        e.preventDefault();
                       var idNumber=$("input[name=idNumber]").val();

                    if(!idNumber || idNumber.length !== 11) {
                        alert('شماره موبایل وارد نشده / صحیح نیست!');
                        return;
                 }           

                        $.ajax({
                            type: "POST",
                            url:"{{route('InputLogin.post')}}",
                           data:{idNumber:idNumber },

                            success:function(data)
                            {

                                    $('#cardlogin').css('visibility', 'hidden');
                                    $('#loginContainer2').css('visibility', 'visible');

                            }
                        });
                    });
                });
            </script>

و اینکه باز در بخش success یعنی بعد از گرفتن پاسخ از سمت سرور باید طبق حالت های مختلفی که ممکنه رخ بده یک سری کارهایی انجام بدید. مثلا اینکه شماره موبایل وارد شده در دیتابیس پیدا نشد یا ...
و اگر همه چیز اوکی بود باید فرم مرحله بعد رو بهش نشون بدید. البته باز باید یک فکری هم به حال این بکنید که چطور در ریکوئست بعدی که کلمه عبور رو میفرسته به شماره موبایل کاربر هم دسترسی داشته باشید که بعد بتونید عملیات Auth رو انجام بدید. شاید یک راهش ذخیره در Session کاربر باشه یا ...

در کل اینکه با وجود زحماتی که کشیدید تا اینجا ولی هنوز بخشی زیادی از کار مونده و اینجا هم نمیشه کل فرایند رو براتون نوشت یا توضیح داد. بهتره خودتون تمام سعیتون رو بکنید و هر جا به مشکل یا سوال برخوردید از دوستان بپرسید.

موفق و پیروز باشید


محسن مهری
تخصص : برنامه نویس back-end با زبان...
@mohsen.mehri6101 4 سال پیش مطرح شد
0

سلام دوست عزیزمون راست میگه یک فیلم کوتاه توی یوتیوب پیدا کن نگاه کن مثل اینو جستجو کن :

how implement login_page ajax and laravel

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام