HTML 양식 데이터를 JSON으로 서버에 보내는 방법은 무엇입니까?
우선, 저는 같은 제목의 질문을 많이 알고 있습니다.저는 많은 것을 보았지만, 저에게는 아직 아무것도 효과가 없습니다.그래서 제가 이 질문을 연 것입니다.
저는 기본적으로 두 가지 시나리오가 있습니다. 1) "액션"과 "방법"을 html 형식으로 정의합니다. 2) "액션"과 "방법"을 html 형식으로 정의하지 않습니다.
여기 첫 번째 시나리오가 있습니다.
이메일과 비밀번호라는 두 가지 필드만 있는 양식을 가지고 있습니다.
여기 스니펫이 있습니다.
<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 인코딩입니다.나는 그것을 알고 있습니다.그래서 이제 제가 한 것은 아약스를 추가해서 json으로 보냈습니다.
여기 제 질문 내용이 있습니다.
$('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)
}
});
저는 SerializeJ를 사용하고 있습니다.폼 데이터를 json에 sealize하는 SON 라이브러리입니다.
이제 같은 일이 발생합니다. 폼 데이터를 urlencoded로 보내고 json을 서버로 보내야 합니다.
그 후에serializeJSON();내가 데이터에 경고할 때, 그것은 성공적으로 json으로 표시됩니다.
여기 제가 한 일이 있습니다.
var obj = $('form').serializeJSON();
var jsonString = JSON.stringfy(obj);
alert(jsonString)
그것은 내 폼 필드의 json 값으로 나에게 성공적으로 경고합니다. 그러나 내가 위의 jquery 폼 데모에서 보여준 것처럼 ajax jquery와 함께 사용할 때, 그 json 문자열은 서버로 이동한다고 가정합니다. 그러나 그렇지 않습니다. 대신에 그것은 urlencoded와 같습니다.
두 번째 시나리오는 첫 번째 시나리오와 동일하지만, 이번에는 양식의 동작과 방법이 없습니다.지금 일어나고 있는 일은 제가 jquery에서 POST를 언급했음에도 불구하고 제 폼 메소드가 GET 역할을 하는 것입니다.
참고: Wireshark에서 HTTP 요청 및 응답을 확인하기 위해 모든 보고서를 확인했습니다.
내가 여기서 뭘 잘못하고 있는 거지?나는 URL 인코딩 대신 JSON 데이터를 서버로 보내고 싶습니다.어떻게 해야 하나요?
편집: 저는 또 다른 것을 발견했습니다.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
그래서 제가 html 형식 대신 jquery에서 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로 읽고 내용에 URL 인코딩이 아닌 다른 것을 정의하는 것을 알게 되었습니다.유형은 POST 대신 OPTIONS 플래그를 트리거합니다.기본적으로 브라우저가 OPTIONS 플래그와 함께 사전 요청을 보내고 서버 HTTP 상태에 따라 실제 요청을 보냅니다.백엔드 서버가 교차 오리진 요청을 허용하지 않기 때문에 발생한 일입니다.그래서 그런 문제들이 생긴 겁니다.일시적으로 크로스 오리진이 가능한 크롬 익스텐션을 찾았습니다.그것으로 제 문제는 해결되었습니다.
여기 해당 크롬 확장에 대한 링크가 있습니다.
그것은 매우 적절한 해결책이 아닙니다.하지만 당신이 나와 같은 상황이라면, 당신은 그것을 사용할 수 있습니다.
제 상황은 프런트 엔드를 개발하고 요청에 대한 API를 가지고 있는 것입니다.하지만 제 등쪽 끝은, 제가 개발하지 않았습니다.그래서 출처가 멀리 있습니다.운영 환경에서 모든 파일이 서버에 병합됩니다.하지만 지금은 테스트를 위해 API로 작업하기 위해 이 확장을 사용해야 했습니다.
코드가 정확합니다.기본값 방지()만 필요합니다.
$( "#target" ).submit(function( event ) {
//your code
event.preventDefault();
});
양식이 없으면 양식도 브라우저에 의해 게시됩니다.보고하는 http 추적은 브라우저의 정상 게시물을 Ajax 호출이 아닌 것으로 간주합니다.
당신은 이벤트 수신기 기능을 변경해야 합니다.
$('#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;
});
양식을 제출한 후 Ajax에 요청하지 마십시오.양식 버튼을 제출 유형이 아닌 것으로 만드십시오. 클릭하면 Ajax에 전화하십시오.
또는 작업량을 줄이려면 폼 작업을 유휴 값 "javascript://"로 변경하여 Ajax 요청만 실제로 제출 이벤트의 서버로 전송되도록 합니다.
<form id="login-form" action="javascript://" method="post">
$('#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;
});
여기 제 코드가 있습니다. 도움이 될 것입니다.
<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>
<button type="submit" class="btn btn-success " id="submitform">Submit</button>
<script>
$(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>
Jquery 기능:
var _serializeForm = function (id) {
var result = {};
$.each($(id).serializeArray(), function (i, field) {
result[field.name] = field.value.trim() || null;
});
return result;
}
양식에 "Id"를 입력한 다음 위의 방법을 사용하여 json 직렬화를 수행합니다.
$.ajax({
type: 'POST',
url: 'http://192.168.52.166:6000/api/2/users/login/',
dataType: 'json',
data: JSON.stringify(_serializeForm('#formId')),
contentType : 'application/json',
success: function(data) {
alert(data)
}
});
$('#btn').click(function(){
$.post('getJSONData.jsp', $('#wForm').serialize(), function(json){
alert(json);
}, 'json');
});
게시물 내에서 http 프로토콜을 사용하거나 요청을 받을 수 없습니다. 외부 요청을 하지 않고 서버의 디렉터리 내에 파일 경로를 배치해야 합니다. 요청 POST에서 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)
}
});
데이터에서 JSON.stringify()를 제거합니다.$.ajax({type: 'POST', URL: 'http://192.168.52.166:6000/api/2/users/login/', dataType: 'json', data: obj, content유형: 'application/json', 성공: 함수(데이터) {alert(데이터) });
언급URL : https://stackoverflow.com/questions/40609972/how-to-send-html-form-data-as-json-to-server
'sourcecode' 카테고리의 다른 글
| Angular App의 구문 오류: 예기치 않은 토큰 < (0) | 2023.07.28 |
|---|---|
| PowerShell에서 문자열을 datetime으로 변환 (0) | 2023.07.28 |
| @Test 컨테이너가 있는 Mongo 드라이버, 테스트가 성공적으로 실행된 후 예외 발생 (0) | 2023.07.28 |
| 리소스 및 컨트롤러 링크 작성기를 찾을 수 없으며 더 이상 사용되지 않습니다. (0) | 2023.07.23 |
| SpEL @ConditionalOnProperty 문자열 속성이 비어 있거나 null입니다. (0) | 2023.07.23 |