Question

我尝试构建一个应用程序using Javascript, HTML, CSS, AJAX, JSON，其中客户端填写表单并发送到服务器，然后服务器响应客户端。

对于这个问题，我已经完成了这些步骤，

首先，我构建一个具有表单的HTML页面。

然后，我使用onClick事件处理程序将信息发送到javascript。

然后，我构建了一个具有表单信息的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地址和端口号信息。

帮助我。提前致谢。

Answer 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对象是键值对。

如何在服务器端捕获JSON对象并回复（在javascript中）

1 个答案: