如何将HTML表单数据作为JSON发送到服务器？
首先，我知道很多有相同标题的问题..我看到了很多东西，但是对我而言没有任何作用。这就是为什么我打开这个问题。如何将HTML表单数据作为JSON发送到服务器？
我有两个场景基本上 1）定义“行动”和“方法”的HTML形式。 2）没有“action”和“method”的html格式。
因此，这里是第一种情况，
1）我那里有两个字段，即电子邮件地址和密码的形式。
这里是的这段
<form id="login-form" action="http://192.168.52.166:6000/api/2/users/login/" method="post">
<p><label for="email">Email</label>
<input type="email" name="email" id="email"></p>
<p><label for="password">Password</label>
<input type="password" name="password" id="password"></p>
<button value="Submit" type="submit">Login</button>
</form>
首先，当我提交表单，它把我的所有字段值的URL编码。表单的默认内容类型是urlencoded。我知道。所以现在我所做的是，添加ajax将其作为json发送。
，这里是我的jQuery SNIPPIT，
$('form').submit(function(){
var obj = $('form').serializeJSON();
$.ajax({
type: 'POST',
url: 'http://192.168.52.166:6000/api/2/users/login/',
dataType: 'json',
data: JSON.stringify(obj),
contentType : 'application/json',
success: function(data) {
alert(data)
}
});
我使用SerializeJSON库表单数据serealize到JSON。
现在发生的是同样的事情，它发送表单数据为urlencoded，而它假设发送为json到服务器。
之后serializeJSON();函数当我提醒数据时，它成功显示为json。
这里是我做过什么
var obj = $('form').serializeJSON();
var jsonString = JSON.stringfy(obj);
alert(jsonString)
它成功地提醒我与我的表单字段的JSON值。但是当我像上面的jQuery表单演示中所示的那样使用jQuery jQuery时，那个json字符串会假设前往服务器。但它不是，而是像urlencoded一样。
2）第二种情况与第一种情况相同，但这次没有表单的操作和方法。现在发生的事情是我的表单方法充当GET，即使我在jQuery中提到POST。
注意：我使用Wireshark检查了所有报告以检查HTTP请求和响应。
我在这里做错了什么？我只想发送JSON数据到服务器而不是URLEncoded。我该怎么办？
编辑：我发现了另一件事。当我发送表单数据而没有定义HTML格式的动作和方法时，我会收到来自服务器的以下请求和响应。 （这些反应从Wireshark的拍摄）
OPTIONS /api/2/users/login/ HTTP/1.1
Host: 192.168.52.166:6000
Access-Control-Request-Method: POST
Origin: http://localhost
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.90 Safari/537.36
Access-Control-Request-Headers: content-type
Accept: */*
Referer: http://localhost/app/login.html
Accept-Language: en-US,en;q=0.8,ca;q=0.6
Accept-Encoding: gzip
HTTP/1.1 200 OK
Server: nginx/1.4.6 (Ubuntu)
Date: Mon, 14 Nov 2016 00:55:42 GMT
Content-Type: application/json
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept, Cookie
X-Frame-Options: SAMEORIGIN
Allow: POST, OPTIONS
所以好像我在jQuery的，而不是在HTML表单POST提。它不工作。
这是我在使用html格式的动作和方法时得到的结果。
POST /api/2/users/login/ HTTP/1.1
Host: 192.168.52.166:6000
Content-Length: 48
Cache-Control: max-age=0
Origin: http://localhost
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.90 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Referer: http://localhost/app/login.html
Accept-Language: en-US,en;q=0.8,ca;q=0.6
Cookie: csrftoken=M5ItY7prMtJLBZWOJAN4D9uMDs2uFz5d
Accept-Encoding: gzip
email=emjimadhu%40email.com&password=qwerty123
HTTP/1.1 201 CREATED
Server: nginx/1.4.6 (Ubuntu)
Date: Sun, 13 Nov 2016 18:11:51 GMT
Content-Type: application/json
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept, Cookie
X-Frame-Options: SAMEORIGIN
Allow: POST, OPTIONS
Set-Cookie: csrftoken=tFSyA9OSfyBi4NHoU6FVFSD7BZOE6S1a; expires=Sun, 12-Nov-2017 18:11:51 GMT; Max-Age=31449600; Path=/
Set-Cookie: sessionid=eoaq13tgrjdmsqwcke7zbhgv92dec9c3; expires=Sun, 27-Nov-2016 18:11:51 GMT; httponly; Max-Age=1209600; Path=/
答案找到
首先感谢大家谁试图回答..答案没有工作对我来说..它的原因有没有一个编码问题。我读的jQuery Ajax作为API并且发现，在contentType中定义除URL编码之外的其他定义将触发OPTIONS标志而不是POST。基本上它所做的是浏览器将发送带有OPTIONS标志的预先请求并基于服务器的HTTP状态，它将发送真正的请求。 。这是发生原因我的后端服务器不允许交叉来源请求..这就是为什么我得到这些问题..我发现了一个铬扩展，它允许临时交叉起源..这清除了我的p roblem ..
这里是链接到浏览器扩展程序
这是极不恰当的解决方案。但是，如果你有同样的情况我的，你可以用它..
我的情况是我开发的前端和有API来提出请求..但我的后端，我没有开发它..所以源远离..在生产环境中，所有我的文件将被合并到服务器..但现在，为了测试，我需要使用这个扩展与我的API一起工作..
您必须将该函数更改为事件侦听器。
$('#form').on('submit', function(event){
var obj = $('form').serializeJSON();
$.ajax({
type: 'POST',
url: 'http://192.168.52.166:6000/api/2/users/login/',
dataType: 'json',
data: JSON.stringify(obj),
contentType : 'application/json',
success: function(data) {
alert(data)
}
});
return false;
});
尝试从数据中删除JSON.stringify（）。 $就（{ 类型： 'POST'， 网址： 'http://192.168.52.166:6000/api/2/users/login/'， 数据类型： 'JSON'， 数据：OBJ， 的contentType： '应用/ JSON'， 成功：功能（数据）{ 警报（数据） } }）;
不，它不工作.. –
不要提交表单然后发出Ajax请求。使表单按钮不是提交类型，只需从它的onclick中调用Ajax即可。
或者，如果你想少点工作，只是改变了形式的行动，一些闲置的价值“的javascript：//”，因此，只有Ajax请求真正被发送到服务器上的提交事件：
<form id="login-form" action="javascript://" method="post">
不能使用HTTP协议的帖子内或get请求，你必须把你的服务器上的目录中的文件的路径，而不进行外部请求，尝试从您的申请信息中删除http://192.168.52.166:6000/
$.ajax({
type: 'POST',
url: 'api/2/users/login/',
dataType: 'json',
data: JSON.stringify(obj),
contentType : 'application/json',
success: function(data) {
alert(data)
}
});
你说的POST或GET的AJAX请求？或一般POST'$ .post（）'和GET'$ .get（）'？ –
你在说什么POST或GET的Ajax请求？或一般POST'$ .post（）'和GET'$ .get（）'？ –
任何要求发布或获取的请求都不允许你放入动作url“http”，因为它不安全，想象只有知道它才能发送请求到任何url。你只需要将目录放在服务器中，但我不知道这是否是你唯一的问题。 –
here is my code It will help you:
<script>
<form name="myform" id="myform">
<div class="form-group">
<label for="fullName">Name:</label>
<input type="text" name="fullName" class="form-control">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" name="email" class="form-control">
</div>
<div class="form-group">
<label for="subject">Subject:</label>
<input type="text" name="subject" class="form-control">
</div>
<div class="form-group">
<label for="mark">Mark:</label>
<input type="number" name="mark" class="form-control">
</form>
</div>
<button type="submit" class="btn btn-success " id="submitform">Submit</button>
$(document).ready(function(){
$("#submitform").click(function(e)
{
var MyForm = JSON.stringify($("#myform").serializeJSON());
console.log(MyForm);
$.ajax(
{
url : "<your url>",
type: "POST",
data : MyForm,
});
e.preventDefault(); //STOP default action
});
});
</script>
$('#form').on('submit', function(event){
var obj = $('form').serialize();
$.ajax({
type: 'POST',
url: 'http://192.168.52.166:6000/api/2/users/login/',
dataType: 'json',
data: obj,
contentType : 'application/json',
success: function(data) {
alert(data)
}
});
return false;
});
欢迎来到Stackoverflow！感谢您的回答，您可能想为您的答案增加一点解释。 一目了然，您的答案与原始问题中的代码看起来非常相似。 –
对不起，我有一个在jquery返回语句，我忘了提及它... –
我改变了代码 - 你要做它作为事件侦听器而不是自己的功能。 – nrhode