Javascript 如何使用html表单数据发送JSON对象_Javascript_Jquery_Html_Json_Forms

Javascript 如何使用html表单数据发送JSON对象

javascript jquery html json forms

Javascript 如何使用html表单数据发送JSON对象,javascript,jquery,html,json,forms,Javascript,Jquery,Html,Json,Forms,我得到了这个HTML表单： <html> <head><title>test</title></head> <body> <form action="myurl" method="POST" name="myForm"> <p><label for="first_name">First Name:</label> <input ty

我得到了这个HTML表单：

<html>
<head><title>test</title></head>
<body>
    <form action="myurl" method="POST" 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>


测试
名字：

姓氏：

当用户单击submit时，将此表单的数据作为JSON对象发送到我的服务器的最简单方法是什么

更新：我已经做到了这一点，但似乎不起作用：

<script type="text/javascript">
    function submitform(){
        alert("Sending Json");
        var xhr = new XMLHttpRequest();
        xhr.open(form.method, form.action, true);
        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
        var j = {
            "first_name":"binchen",
            "last_name":"heris",
        };
        xhr.send(JSON.stringify(j));


函数submitform（）{
警报（“发送Json”）；
var xhr=new XMLHttpRequest（）；
xhr.open（form.method、form.action、true）；
setRequestHeader（'Content-Type'，'application/json；charset=UTF-8'）；
变量j={
“名字”：“宾晨”，
“姓氏”：“heris”，
};
send（JSON.stringify（j））；

我做错了什么？

HTML无法从表单数据生成JSON

如果您真的想从客户端处理它，那么您必须使用JavaScript来：

通过DOM从表单收集数据

将其组织在对象或数组中

使用生成JSON

贴上

您最好坚持使用

application/x-www-form-urlencoded

数据，并在服务器上而不是在JSON上处理这些数据。您的表单没有任何复杂的层次结构，而JSON数据结构可以为您带来好处

更新以回应问题的主要重写

您的JS没有
```
readystatechange
```
处理程序，因此您对响应不做任何处理
单击submit按钮时触发JS，而不取消默认行为。一旦JS功能完成，浏览器将以常规方式提交表单

获取完整的表单数据作为数组，并将其字符串化

var formData = JSON.stringify($("#myForm").serializeArray());

您可以稍后在ajax中使用它。或者，如果您不使用ajax，则将其放在隐藏的文本区域并传递给服务器。如果此数据通过标准格式数据作为json字符串传递，则您必须使用进行解码。然后，您将获得数组中的所有数据

$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType : "application/json"
});

您的代码很好，但从未执行，原因是提交按钮[type=“submit”] 只需将其替换为type=button

<input value="Submit" type="button" onclick="submitform()">

我迟到了，但我要说的是，对于那些只需要使用html的对象的人来说，有一种方法。在一些服务器端框架（如PHP）中，您可以编写以下代码：

<form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="name[first]" id="fname"></p>

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

        <input value="Submit" type="submit">
    </form>

您可以尝试以下方法：

<html>
<head>
    <title>test</title>
</head>

<body>
    <form id="formElem">
        <input type="text" name="firstname" value="Karam">
        <input type="text" name="lastname" value="Yousef">
        <input type="submit">
    </form>
    <div id="decoded"></div>
    <button id="encode">Encode</button>
    <div id="encoded"></div>
</body>
<script>
    encode.onclick = async (e) => {
        let response = await fetch('http://localhost:8482/encode', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                },
        })

        let text = await response.text(); // read response body as text
        data = JSON.parse(text);
        document.querySelector("#encoded").innerHTML = text;
      //  document.querySelector("#encoded").innerHTML = `First name = ${data.firstname} <br/> 
      //                                                  Last name = ${data.lastname} <br/>
      //                                                  Age    = ${data.age}`
    };

    formElem.onsubmit = async (e) => {
      e.preventDefault();
      var form = document.querySelector("#formElem");
     // var form = document.forms[0];

        data = {
          firstname : form.querySelector('input[name="firstname"]').value,
          lastname : form.querySelector('input[name="lastname"]').value,
          age : 5
        }

        let response = await fetch('http://localhost:8482/decode', {
                method: 'POST', // or 'PUT'
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(data),
        })

        let text = await response.text(); // read response body as text
        document.querySelector("#decoded").innerHTML = text;
    };
</script>
</html>


测试
编码
encode.onclick=async（e）=>{
let response=等待取数（'http://localhost:8482/encode', {
方法：“GET”，
标题：{
“内容类型”：“应用程序/json”，
},
})
let text=等待响应。text（）；//将响应正文作为文本读取
data=JSON.parse（文本）；
document.querySelector（“#编码”）.innerHTML=text；
//document.querySelector（“#encoded”）.innerHTML=`First name=${data.firstname}

//姓氏=${data.lastname}

//年龄=${data.Age}`
};
formElem.onsubmit=async（e）=>{
e、 预防默认值（）；
var form=document.querySelector（“#formElem”）；
//var form=document.forms[0]；
数据={
firstname:form.querySelector（'input[name=“firstname”]”）。值，
lastname:form.querySelector（'input[name=“lastname”]”）。值，
年龄:5
}
let response=等待取数（'http://localhost:8482/decode', {
方法：“POST'、//或“PUT”
标题：{
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify（数据），
})
let text=等待响应。text（）；//将响应正文作为文本读取
document.querySelector（“#解码”）.innerHTML=text；
};

我找到了一种只使用HTML表单传递JSON消息的方法

此示例适用于GraphQL，但适用于任何需要JSON消息的端点

默认情况下，GrapqhQL需要一个名为operations的参数，您可以在其中添加JSON格式的查询或变体。在这种特定情况下，我调用此查询，请求获取allUsers并返回每个用户的用户ID

{ 
 allUsers 
  { 
  userId 
  }
}

我使用文本输入来演示如何使用它，但您可以将其更改为隐藏输入，以向用户隐藏查询

<html>
<body>
    <form method="post" action="http://localhost:8080/graphql">
        <input type="text" name="operations" value="{&quot;query&quot;: &quot;{ allUsers { userId } }&quot;, "variables":  {}}"/>
        <input type="submit" />
    </form>
</body>
</html>

为了使此动态化，您需要JS在提交表单之前将文本字段的值传输到查询字符串。无论如何，我发现这种方法非常有趣。希望它能有所帮助。

微库正是这样做的：

collectValues（formElement）

将从输入字段返回一个标准化的json（也就是说，复选框为布尔值，选择为字符串，等等）.

看看jQuery API中的

$.ajax

。它一定要是JSON对象吗？对象应该有什么结构？@AnthonyGrist是的，它必须是JSON，因为它指向ReST服务。什么“似乎不起作用”意思是？记住，我们看不到你的屏幕。@Konos5-REST与JSON无关。它不要求数据采用任何特定格式。你已经用jQuery标记了问题。那么你在用它吗？用

$。ajax

传递数据真的很容易。好吧，那我怎么解决这个问题呢？@Quentin:在我的情况下，我需要不带域c的跨域帖子control@user2284570-如果你有新问题，那就有一个问题。有人建议在表单定义中添加

enctype='application/json'

，以创建json数据@ekrike-你读过该页面吗？页面上写着，在一个巨大的框中，周围有一条黑色和黄色的危险条纹。小心。该规范不再处于活动维护中HTML工作组不打算进一步维护它。确切地说type=“button”是非常重要的，如果不使用的话

{ 
 allUsers 
  { 
  userId 
  }
}

<html>
<body>
    <form method="post" action="http://localhost:8080/graphql">
        <input type="text" name="operations" value="{&quot;query&quot;: &quot;{ allUsers { userId } }&quot;, "variables":  {}}"/>
        <input type="submit" />
    </form>
</body>
</html>