Ajaxを使用してユーザー名が重複していないかを非同期で確認する方法

今回はAjaxを使ってユーザー名が重複していないかを非同期で確認する方法を紹介します。 。 どのウェブサイトでもユーザーを登録する際、そのユーザーが既に存在するかどうかがチェックされます。ずっと前の処理方法では、検証のためにすべてのデータをサーバーに送信していましたが、その後、Ajax と非同期対話を使用すると、ユーザーがユーザー名を入力し続けたときのユーザー エクスペリエンスが非常に悪かったのは明らかです。他の情報を入力すると、Ajax はその情報をサーバーに送信してユーザー名が登録されているかどうかを確認します。これにより、ユーザー名がすでに存在する場合は、ユーザーがすべてのデータを送信するのを待たずにプロンプ​​トが表示されます。この方法を使用すると、ユーザー エクスペリエンスが大幅に向上します。今日は、このインタラクション方法について説明します。

以下は、JS を使用してユーザー ID を取得して user_validate.jsp ページに送信し、ページから返されたメッセージをコールバック メソッドで受信してユーザーに通知します。

function validate(field) { 
  if (trim(field.value).length != 0) { 
    //创建Ajax核心对象XMLHttpRequest 
    createXMLHttpRequest(); 
     
    var url = "user_validate.jsp?userId=" + trim(field.value) + "&time=" + new Date().getTime(); 
     
    //设置请求方式为GET，设置请求的URL，设置为异步提交 
    xmlHttp.open("GET", url, true); 
     
    //将方法地址复制给onreadystatechange属性 
    //类似于电话号码 
    xmlHttp.onreadystatechange=callback; 
     
    //将设置信息发送到Ajax引擎 
    xmlHttp.send(null); 
  } else { 
    document.getElementById("spanUserId").innerHTML = ""; 
  } 
} 
 
function callback() { 
  //alert(xmlHttp.readyState); 
  //Ajax引擎状态为成功 
  if (xmlHttp.readyState == 4) { 
    //HTTP协议状态为成功 
    if (xmlHttp.status == 200) { 
      if (trim(xmlHttp.responseText) != "") { 
        //alert(xmlHttp.responseText); 
        document.getElementById("spanUserId").innerHTML = "<font color=&#39;red&#39;>" + xmlHttp.responseText + "</font>"; 
      }else { 
        document.getElementById("spanUserId").innerHTML = ""; 
      } 
    }else { 
      alert("请求失败，错误码=" + xmlHttp.status); 
    } 
  } 
}

user_validate.jsp ページは、ユーザー ID を受け取り、その ID に基づいてユーザー ID が存在するかどうかを問い合わせます。存在しない場合は、何も返されません。

<% 
  String userId = request.getParameter("userId"); 
  if(UserManager.getInstance().findUserById(userId) != null) { 
    out.println("用户代码已经存在"); 
  } 
%>

カーソルがユーザー コード テキスト ボックスから離れると、check メソッドがトリガーされます。

コードをコピー

コードは次のとおりです:

レンダリング

ユーザー ID に基づいて存在するかどうかを確認する方法のコードは単純すぎるため、投稿しません。皆さん、投稿すると帯域幅が無駄になるのではないかと心配しています。

Web 開発を行うときは、クライアント側の検証 (もちろん、セキュリティのためにサーバーの検証が必要です) と非同期対話を使用すると、ユーザー エクスペリエンスを効果的に向上させることができます。ユーザーが快適に使用し、私たちが作ったものを使いたいと感じて初めて、私たちの仕事は意味のあるものになります。ユーザーを満足させることです。

ページ上のさまざまなプロンプトは非常に細かい部分であるため、うまく機能しないとユーザーが使用しなくなる可能性があります。プログラマーは、ユーザーが Web エクスペリエンスに夢中になるよう、細部にまで注意を払っています。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

ajaxでjosnpを使用してjosnデータを受信する手順の詳細な説明

フロントエンドのajaxリクエストのエレガントなソリューションを実装する方法

以上がAjaxを使用してユーザー名が重複していないかを非同期で確認する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。