1

using Javascript, HTML, CSS, AJAX, JSONクライアントがフォームに入力してサーバーに送信し、その後サーバーがクライアントに応答するアプリケーションを構築しようとしました。

この問題については、次の手順を実行しました。

  1. まず、フォームを持つ HTML ページを作成します。
  2. 次に、onClick イベント ハンドラーを使用して情報を JavaScript に送信します。
  3. 次に、フォーム情報を持つ JSON オブジェクトを作成します。

そのためのコードは、

HTML コード :-

<div id="stylized" class="myform">
            <form name = "user_form" action = "operation.js" method = "post">
                <h1>Sign-up form</h1>
                <p>This is the basic look of my form without table</p>

                <label>Name
                <span class="small">Add your name</span>
                </label>
                <input type="text" name="name" id = "name_data"  /><br>
                <p id = "name_update"></p><br>

                <label>Email
                <span class="small">Add a valid address</span>
                </label>
                <input type="text" name="email"  /><br>
                <p id = "email_update"></p><br>

                <label>Url
                <span class="small">Complete URL</span>
                </label>
                <input type="text" name="url"  />

                <label>Comment
                <span class="small">That you want to say</span>
                </label>
                <textarea type="text" name="comment"  ></textarea>

                <button type="button" name = "button"  onClick="operatn(this.form)">Submit</button>
                <div class="spacer"></div>
                <h4 align = "center" id = "submit_update"></h4>
                <div class="spacer"></div>
            </form>
        </div>

JAVASCRIPT コード :-

function operatn(x) {
    var name1 = x.name.value;
    var email1 = x.email.value;
    var url1 = x.url.value;
    var comment1 = x.comment.value;
    //alert(comment);

    var txt = '{ "details" : [ ' +
                        ' { "name_key" : "name", "name_value" : "' + name1 + '" }, ' + 
                        ' { "email_key": "email" , "email_value" : "' + email1 + '" }, ' +
                        ' { "url_key" : "url" , "url_value" : "' + url1 + '"  }, ' +
                        ' { "comment_key" : "comment" , "comment_value" : "' + comment1 + '" } ] }';

    var obj = eval( "(" + txt + ")" );
    //alert(obj.details[3].comment_value);

}

しかし、私は混乱しました、このオブジェクトをサーバーに送信する方法は? （そのコードまたは適切なリンクを教えてください）そして、

クライアントが、サーバーの IP アドレスとポート番号情報を持つサーバーとの接続を確立する方法。

助けて 。前もって感謝します。

4

1 に答える 1

1

不足しているのは、コードの「ajax」部分です。コードはサーバーにリクエストを送信する必要があります。これは、 を使用して行われXMLHttpRequestます。

XMLHttmlRequest を抽象化した jQuery を使って、

function operatn(x) {
    $.ajax({
       url:"http://yoursiteurl.com",
       data:{
           comment:x.comment.value,
           email: x.email.value,
           url:x.url.value,
           name:x.name,value,
       }
    }).done(function(serverResponse){
         //here you can handle server response
    }).fail(function(err){
         //here you can handle errors
    });

    //alert(obj.details[3].comment_value);

}

非同期であることを忘れないでください。

編集: JSON オブジェクトはキーと値のペアであるため、キーと値のペアを少し変更しました。

于 2013-01-20T19:25:29.530 に答える