首先我知道有很多相同标题的问题..我看到了很多东西,但到目前为止没有什么能解决我的问题。这就是为什么我打开这个问题的原因。
基本上我有两种情况: 1)在HTML表单中定义“action”和“method”。 2)在HTML表单中不使用“action”和“method”。
以下是第一种情况,
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 编码发送。表单的默认内容类型是 URL 编码,我知道这一点。所以现在我做的是,添加了 Ajax 使其作为 JSON 发送。
这是我的 jQuery 代码片段:
$('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库将表单数据序列化为json。
现在的问题是它发送的是urlencoded格式的表单数据,而应该发送为json格式给服务器。
在使用serializeJSON();
函数后,当我弹出数据时,它成功地以json的形式显示。
这是我所做的。
var obj = $('form').serializeJSON();
var jsonString = JSON.stringfy(obj);
alert(jsonString)
它成功地使用JSON值警报我表单字段的内容。但是当我像上面介绍的jQuery表单演示中使用它时,这个JSON字符串应该传输到服务器。但实际上它不是,而是作为urlencoded传递。
2)第二种情况与第一种相同,但这次没有表单的动作和方法。现在发生的是我的表单方法即使我在jQuery中提到了POST也会被视为GET。
注意:我使用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中提及POST,而不是在HTML表单中时,它无法工作。
以下是我在HTML表单中使用action和method时得到的结果。
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 状态发送真实请求.. 这是因为我的后端服务器不允许跨源请求..这就是我遇到这些问题的原因.. 我找到了一个chrome扩展程序,可以暂时允许跨源..这解决了我的问题..
这是该chrome扩展程序的链接:
这不是一个合适的解决方案..但是如果你和我一样处于同样的情况,你可以使用它..
我的情况是我开发了前端并拥有用于发送请求的API..但是我的后端,我没有开发它..所以源代码离我很远..在生产环境中,所有我的文件将被合并在服务器上..但现在,为了测试,我需要使用这个扩展程序来处理我的API..