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 回答