0

私は、HTML/CSS/JavaScript/jQuery のスキルを使用して、次の要件に従ってコード ブロックを解決する任務を負っています。

要件: - add_user 関数を介して ajax を使用して、ユーザーが入力したデータを送信します。
- サービスが 200 ステータスで応答すると想定できます。
- ユーザー追加サービスが値 false の成功プロパティで応答する場合、フォームの上部にエラーを赤色で表示します。error プロパティをメッセージとして使用します。
- 応答が成功プロパティを返したときに、ユーザー リストに新しいユーザーを表示します。
- ユーザーが無効な電子メール アドレスを入力したときに、電子メール入力を強調表示します。また、「有効なメールアドレスを入力してください」というテキストを赤色で表示します。
注: サービスはこの検証機能を提供せず、無効な電子メールを受け入れます。

//example usage.
addUser('john', 'smith', function(response){
    console.log('response is: ' + JSON.stringify(response)); 
});

/*
################################### DO NOT MODIFY BELOW THIS LINE ##########
############################################################################
*/
// Add user service wrapper.
function addUser(username, email, callback) {
    var response;

    if(username === "Error"){
        response = JSON.stringify({
            success: false,
            error: "Error is not acceptable username."
        });
    } else {
        response = JSON.stringify({
            success: true,
            user: {
                username: username,
                email: email
            }
        });   
    }

    $.ajax({
        url: '/echo/json/',
        type: "post",
        data: {
            json: response
        },
        success: callback
    });
};

次の HTML が適用されます。

<h2>Add a User:</h2>
<form>
    <input type="text" name="username" placeholder="name">
    <input type="email" name="email" placeholder="email">
    <button>add user</button>
</form>
<h2>Users:</h2>
<ul id="users"></ul>

CSS:

body {
    font-family: Helvetica, Sans, Arial;
}
p, ul {
    padding: 10px;
}
ul {
    margin: 5px;
    border: 2px dashed #999;
}

わかりました、うまくいけば、あなたはまだ私と一緒にいます。オブジェクト指向の JavaScript だけでなく、jQuery、HTML、および CSS についてもよく理解しています。ただし、AJAX の経験はほとんどなく、JSON 構文/アプリケーションの経験はありません。したがって、このプロジェクトのいくつかの側面は私には非常に単純に見え、それらを理解するのに支援が必要だとは思いません. 適切に行う方法を私がすでに知っていることは次のとおりです。

  • フォームの上に赤でエラーを表示する (エラー情報の取得は別の話です)
  • 順序付けられていないリスト セクションに新しいユーザーを表示する
  • 無効な電子メール アドレスが入力されたときに電子メール入力を強調表示する (クライアント側の検証を使用)

このプロジェクトを理解する上で私が抱えている問題は、フォームに入力されたデータの送信と取得に焦点を当てています。関数 addUser() は最初に、「success: boolean, error: string」または「success: boolean, user」の key:value ペアを含む「Object」の「String」データ型バージョンで変数 response を定義しているように見えます。 : {username:string,email:string}' - ここで最初に問題が発生しました...

これらのキーと値のペアを含むオブジェクトを使用して、検証中にエラーが発生したかどうかを判断し、ユーザー名と電子メールに関連付けられたエラー メッセージや文字列などのデータを取得する場合、それらを保持することは理にかなっています。 「文字列化された」オブジェクトではなく、実際のオブジェクトとして。文字列として、そのオブジェクトのプロパティの値にアクセスする方法がわかりません。それらがオブジェクトの場合、ドット表記を使用して単純に参照し、それらのプロパティの値を取得できます。(つまり、sampleObj.success または sampleObj.error) これらの文字列を適切なオブジェクトに戻すには、eval() や JSON.parse() などの JavaScript 関数で十分なようですが、これらの関数を適切に実装する方法がわかりません。

私が経験している 2 番目の大きな問題は、.ajax() メソッドの jQuery 呼び出しに関するものです。私は AJAX がどのように動作するかについて非常に初歩的な理解を持っていますが、ここで使用されている構文は私を混乱させます。data: {json:response} が type:'post' を使用して url:'/echo/json/' に送信されていることは理解していますが、送信後にそのデータを取得する方法がわかりません。また、そのプロセスで「応答」の値が何を指しているのかわかりません。

最後に、$.ajax() ステートメントの最後でのコールバック関数の使用と、フォーム ボタン入力をクリックした結果としての addUser() 関数の最初の呼び出しとの関係がわかりません。その目的、または構文的にどのように使用されるかがわかりません。

これがかなり複雑なプロジェクトであることは理解しています。しかし、私は自分の知識と既存のオンライン リソースを使用して、これを理解するために数日間にわたって何時間も費やしましたが、私の努力にもかかわらず、それほど遠くまでは行きませんでした. 誰かがこの例を理解するのを手伝ってくれることを願っています.

このプロジェクトのライブ バージョンへのリンク (jsfiddle.net)

//編集// jsfiddleワークフローへの更新されたリンク。正しいjQueryセレクターと、エラーメッセージ/ユーザー入力を表示するための追加機能: http://jsfiddle.net/brianjsullivan/5vv5w/

4

3 に答える 3

0

コードを次のように変更します

$(document).ready(function(){
 $('#button').click(function(){
    $userInput = $('#username').val();
    $emailInput = $('#email').val();

    addUser($userInput,$emailInput,function(response){
        $('#users').html(JSON.stringify(response));
    });
 });
});

ここにフィドルがあります。

于 2013-09-25T18:34:08.590 に答える
0

#問題は、コードで (id)を忘れていることです。

JSFIDDLE

$(document).ready(function(){
    $('#button').click(function(){
        $userInput = $('#username').val();
        $emailInput = $('#email').val();

        addUser($userInput,$emailInput,function(response){
            $('#users').html(JSON.stringify(response));
        });
    });    
});
于 2013-09-25T18:29:08.727 に答える