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

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

javascript html json

Javascript 如何将HTML表单数据作为JSON发送到端点http://localhost:8080,javascript,html,json,Javascript,Html,Json,我有一个简单的HTML表单和一个Java脚本函数，可以用数据生成JSON。我现在只需要将其发送到端点“”，并检查JSON是否已到达该端点。到目前为止，我得到了这个：函数create\u send\u Json（）{ //得名 var fname=document.forms[“myForm”][“first_name”].value； var lname=document.forms[“myForm”][“last_name”].value； //生成JSON 数据={“fname”：fna

我有一个简单的HTML表单和一个Java脚本函数，可以用数据生成JSON。我现在只需要将其发送到端点“”，并检查JSON是否已到达该端点。到目前为止，我得到了这个：

函数create\u send\u Json（）{ //得名 var fname=document.forms[“myForm”][“first_name”].value； var lname=document.forms[“myForm”][“last_name”].value； //生成JSON 数据={“fname”：fname，“lname”：lname}； var jsonData=JSON.stringify（数据）； //发送数据 var xhr=new XMLHttpRequest（）； var url='1〕http://localhost:8080'; xhr.open（“POST”，url）； setRequestHeader（“内容类型”、“应用程序/json”）； xhr.send（jsonData）；返回false； }


形式
名字：

姓氏：

解决方案：

将submitform替换为HTML sumbit按钮中的create_send_Json。

将submit事件添加到submit按钮中，而不是表单中。换一下，你就可以走了

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;
}


形式
名字：

姓氏：

您不需要表单提交方法如果表单中有提交按钮，请检查我的答案。您所需要做的就是将submit方法添加到按钮中，如下所示。要提交表单，请在HTML表单标记上使用onsubmit，或者在按钮标记上使用onclick事件notboth@Jon.Frenchtoast在你看来什么是好的？@Jon.Frenchtoast我检查了xhr.status和xhr.readyState，它分别给我0和1。好的，但是我如何检查json是否真的被发送了呢？有办法监视那个端口吗？


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