如何将 HTML 表单数据作为 JSON 发送到端点 http://localhost:8080

Question

我有一个简单的 HTML 表单和一个使用数据生成 JSON 的 Java Script 函数。 我现在需要的只是将它发送到端点“ http://localhost:8080 ”并检查 JSON 是否到达那里。 到目前为止，我得到了这个：

 function create_send_Json(){ // get name var fname = document.forms["myForm"]["first_name"].value; var lname = document.forms["myForm"]["last_name"].value; // make JSON data = { "fname": fname, "lname": lname}; var jsonData = JSON.stringify(data); // Send data var xhr = new XMLHttpRequest(); var url = 'http://localhost:8080'; xhr.open("POST", url); xhr.setRequestHeader("Content-Type", "application/json"); xhr.send(jsonData); return false; }

 <html> <head> <title>Form</title> <script type = "text/javascript" src = "action.js" ></script> </head> <body> <form onsubmit="return create_send_Json();" name="myForm"> <p><label for="first_name">First Name:</label> <input type="text" name="first_name" id="fname"></p> <p><label for="last_name">Last Name:</label> <input type="text" name="last_name" id="lname"></p> <input value="Submit" type="submit" onclick="submitform()"> </form> </body> </html>

但我认为这是行不通的。

提前致谢。

- - - 编辑 - - - - -

为了清楚起见，我使用以下内容来检查它是否有效：

alert('status: '+xhr.status + ' ,readyState: '+xhr.readyState);

并收到

status: 0 ,readyState: 1

此外，我在代码中进行了建议的更改，但仍需要检查另一端是否收到了 json。

Answer 1

解决方案：

在 HTML sumbit 按钮中用 create_send_Json 替换 submitform。

Answer 2

在提交按钮而不是表单中添加提交事件。 改变它，你会很高兴去。

function create_send_Json(){

    // get name
    var fname = document.forms["myForm"]["first_name"].value;
    var lname = document.forms["myForm"]["last_name"].value;

    // make JSON
    data = { "fname": fname, "lname": lname};
    var jsonData = JSON.stringify(data);

    // Send data
    var xhr = new XMLHttpRequest(); 
    var url = 'http://localhost:8080';

    xhr.open("POST", url); 
    xhr.setRequestHeader("Content-Type", "application/json"); 
    xhr.send(jsonData);

    return false;
}


    <html>
        <head>
            <title>Form</title>
            <script type = "text/javascript" src = "action.js" ></script>
        </head>
    <body>
        <form name="myForm" action="POST">
            <p><label for="first_name">First Name:</label>
            <input type="text" name="first_name" id="fname"></p>

            <p><label for="last_name">Last Name:</label>
            <input type="text" name="last_name" id="lname"></p>

            <input value="Submit" type="submit" onclick="create_send_Json()">
        </form>
    </body>
    </html>

如何将 HTML 表单数据作为 JSON 发送到端点 http://localhost:8080

问题描述

2 个解决方案

解决方案1
0 2020-03-20 03:44:25

解决方案2
0 2020-03-20 03:51:13

如何将 HTML 表单数据作为 JSON 发送到端点 http://localhost:8080

问题描述

2 个解决方案

解决方案1 0 2020-03-20 03:44:25

解决方案2 0 2020-03-20 03:51:13

解决方案1
0 2020-03-20 03:44:25

解决方案2
0 2020-03-20 03:51:13