HTML 양식 데이터를 사용하여 JSON 객체를 보내는 방법

129

그래서이 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>

사용자가 제출을 클릭 할 때이 양식의 데이터를 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));

내가 뭘 잘못하고 있죠?

— 크 스트라 티스
소스

1

한 번 봐 가지고 $.ajax와 serializeJQuery와 API에 있습니다.

— Rory McCrossan 2014 년

1

반드시 JSON 객체 여야합니까? 개체는 어떤 구조를 가져야합니까?

— Anthony Grist 2014 년

1

@AnthonyGrist 예, ReST 서비스로 처리되기 때문에 JSON이어야합니다.

— kstratis 2014 년

4

"작동하지 않는 것 같음"은 무엇을 의미합니까? 귀하의 화면을 볼 수 없습니다.

— Dour High Arch

2

@ Konos5-REST는 JSON과 관련이 없습니다. 데이터가 특정 형식 일 필요는 없습니다.

— danielm

136

완전한 양식 데이터를 배열로 가져오고 json을 문자열 화하십시오.

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

나중에 ajax에서 사용할 수 있습니다. 또는 ajax를 사용하지 않는 경우; 숨겨진 텍스트 영역에 넣고 서버로 전달하십시오. 이 데이터가 일반 형식 데이터를 통해 json 문자열로 전달되면 json_decode를 사용하여 디코딩해야합니다 . 그런 다음 모든 데이터를 배열로 가져옵니다.

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

— 사 친구 테
소스

4

jQuery로 질문에 태그를 지정했습니다. 그래서 그것을 사용하고 있습니까? 와 $.ajax정말 쉽게 데이터를 전달합니다.

— SachinGutte 2014 년

51

HTML은 양식 데이터에서 JSON을 생성하는 방법을 제공하지 않습니다.

클라이언트에서 실제로 처리하려면 JavaScript를 사용하여 다음을 수행해야합니다.

DOM을 통해 양식에서 데이터 수집
객체 또는 배열로 구성
JSON.stringify로 JSON 생성
XMLHttpRequest로 게시

application/x-www-form-urlencoded데이터를 고수하고 JSON 대신 서버에서 처리하는 것이 더 나을 것입니다 . 양식에는 JSON 데이터 구조의 이점을 얻을 수있는 복잡한 계층 구조가 없습니다.

질문의 주요 재 작성에 대한 응답으로 업데이트…

JS에는 readystatechange핸들러 가 없으므로 응답으로 아무것도하지 않습니다.
기본 동작을 취소하지 않고 제출 버튼을 클릭하면 JS를 트리거합니다. 브라우저는 JS 기능이 완료되는 즉시 양식을 (정기적으로) 제출합니다.

— 쿠엔틴
소스

1

좋아요, 어떻게 고칠까요?

— kstratis 2014 년

1

@Quentin : 제 경우에는 도메인 제어없이 교차 도메인 POST가 필요합니다.

— user2284570 2015 년

1

@ user2284570 - 새로운 질문이있는 경우, 다음 질문 하나.

— Quentin

1

추가 제안이 enctype='application/json'JSON 데이터를 생성하기 위해 양식 정의에 w3.org/TR/html-json-forms을

— EkriirkE

4

@EkriirkE — 그 페이지를 읽었습니까? 주위에 검은 색과 노란색의 위험 줄무늬가있는 거대한 상자에 조심하세요. 이 사양은 더 이상 활성 유지 관리 중이 아니며 HTML 워킹 그룹은 더 이상 유지 관리 할 계획이 없습니다.

— Quentin

3

코드는 괜찮지 만 실행되지 않았습니다. 제출 버튼의 원인 [type = "submit"] 그냥 type = button으로 대체 하세요.

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

스크립트 내부; 양식 이 선언되지 않았습니다.

let form = document.forms[0];
xhr.open(form.method, form.action, true);

— tdjprog
소스

정확히 type = "button"은 매우 중요합니다. 사용하지 않으면 URL 매개 변수로 리디렉션됩니다.

— Rohit Parte

1

나는 늦었지만 객체가 필요한 사람들을 위해 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>

그래서 우리 object[property]는 객체를 얻기 위해 입력의 이름을 설정해야 합니다. 위의 예에서 우리는 다음 JSON을 가진 데이터를 얻었습니다.

{
"name": {
  "first": "some data",
  "last": "some data"
 }
}

— Orafaelreis
소스

0

다음과 같이 시도 할 수 있습니다.

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

— 하산 유세프
소스