<トラブルシューティング>Ajax,Django連動...

13409 ワード
テキストリンク
概要
チームプロジェクトでは、会員入金画面でEメールの重複確認機能を実現しています.解決過程で正常に機能していない問題のケースを記録したいです.

1.状況


画面で重複確認ボタンを押し、入力した値をデータベース情報と比較した後、重複するか否かを出力します.ただし、どのメールでも印刷できます.

2.質問


問題は、繰り返し確認ボタンを押すとJavaScriptから入力バーの値を取得してviewsファイルに渡すことができないためです.viewsファイルに電子メールを保存する関数を要求します.POST.get('email',''), request.POST['email'], request.GET["email"]などに変換しても、同じemail変数は空の値として定義されます.

繰り返し確認ボタンをクリックするイベントを含むjsファイル
  • $('.email-check-btn').click(function () {
    const email = $('#email').val()
    if (email === '') {
        alert('이메일 입력 좀...!!!!')
        return
    }

    $.ajax({
        type: 'POST',
        url: '/email-check/',
        datatype: 'json',
        success: function (response) {
            if (response.result !== 'success') {
                return
            }

            if (response.data === 'exist') {
                alert('그 이메일은 이미 있소!')
                $('#email').val('').focus()
            } else {
                alert('좋아, 사용 가능하군!!')
            }
        }
    })
})
    ビューファイル
  • は、電子メールの繰り返しチェック機能を含むビューファイル
    • を含む.
    @csrf_exempt
def email_check(request):
    if request.method == 'POST':
        email = request.POST.get('email', '')
        try:
            user = UserModel.objects.get(email=email)
        except Exception as e:
            user = None

        result = {
            'result': 'success',
            'data': 'not exist' if user is None else 'exist'
        }

        return JsonResponse(result)
  • 繰り返し確認ボタンをクリックすると接続するURLファイル
    • urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.index, name='index'),
    path('sign-in/', views.sign_in, name='sign-in'),
    path('sign-up/', views.sign_up, name='sign-up'),
    path('email-check/', views.email_check, name='email-check'),
    path('main/', views.main, name='main'),
    path('my-page/', views.my_page, name='my-page'),
]
  • 繰り返し確認ボタンラベル
    • <div class="email-check-wrapper">
	<input type="email" placeholder="Email" id="email" name="email"/>
    <button class="email-check-btn" type="button">중복확인</button>
</div>

    3.解決


    チームメンバーとのディスカッションでは、viewsファイルが問題ではなくJavaScriptのAjaxがデータを転送できないのではないかと疑う人がいます.したがってajax文にviewsに移動するデータを追加すると、データの値が正常値を超え、繰り返しチェックが正常に動作します.
  • 修正ajax構文
    • に感銘を与える
    思いがけないところにミスがあったことに気づき、「まさか」と思ってやってみたところ、問題が解決してよかったので、痛快でした.しかし、正確な理由はまだ分からない.これはajaxの基本フォームであるか、他の理由がある可能性があります.
    問題を解決するたびに、「この問題がどのような問題なのか、可能な原因は何なのか、どのキーワードを検索すべきかを解決するために」という部分を明確に定義してこそ、時間を減らすことができます.また、思わぬところで問題が発生した可能性もあるので、最初は問題だと思っていたところに集中して、できないのであれば、関連する部分も問題の範囲内で考えるべきです.
    IMAP値からのHiercastキャストSQLPredicate IMAP値からClassNotFoundException Helelcast SQLPredicateを指定します
    ransackでヒット０件の時には検索結果に何も表示させない方法