복붙노트

[JQUERY] HTML 양식 데이터를 사용하여 JSON 개체를 보내는 방법

JQUERY

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

해결법

  1. 1.배열로 전체 양식 데이터를 얻고 그것을 캐릭터 라인 화 JSON.

    배열로 전체 양식 데이터를 얻고 그것을 캐릭터 라인 화 JSON.

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

    당신은 아약스에서 나중에 사용할 수 있습니다. 아니면 아약스를 사용하지 않는 경우; 숨겨진 텍스트 영역에 넣어 서버에 전달합니다. 이 데이터는 일반적인 폼 데이터를 통해 JSON 문자열로 전달되는 경우에 당신은 json_decode를 사용하여 디코딩해야합니다. 그런 다음 배열에있는 모든 데이터를 얻을 수 있습니다.

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

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

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

    당신이 정말로 클라이언트에서 처리하고 싶은 경우에, 당신은 자바 스크립트를 사용에 의존해야 할 것입니다 :

    당신은 아마 응용 프로그램 / x-www-form-urlencoded로 데이터를 고집하고 처리하는 더 나을 것 대신 JSON의 서버에 그. 양식은 JSON 데이터 구조에서 도움이 될 복잡한 계층 구조를 가지고 있지 않습니다.

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

  3. 3.당신은 뭔가를 시도 할 수 있습니다 :

    당신은 뭔가를 시도 할 수 있습니다 :

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

  4. 4.당신의 코드는 [ "제출"= 유형] 버튼을 제출의 원인이 괜찮 있지만 실행되지 않습니다 단지 형 = 버튼으로 교체

    당신의 코드는 [ "제출"= 유형] 버튼을 제출의 원인이 괜찮 있지만 실행되지 않습니다 단지 형 = 버튼으로 교체

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

    스크립트 내부; 형태는 선언되지 않았습니다.

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

  5. 5.나는 늦었 어하지만 난 방법이, HTML 만 사용하여 객체를 필요로하는 사람들을 위해 말을해야합니다. PHP와 같은 일부 서버 측 프레임 워크에서는 추적 코드를 작성할 수 있습니다 :

    나는 늦었 어하지만 난 방법이, 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>

    그래서, 우리는 가지고 객체에 대한 설정 객체 [부동산]로 입력의 이름이 필요합니다. 위의 예에서 우리는 다음과의 JSON으로 데이터를 가지고 :

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

    6. from https://stackoverflow.com/questions/22195065/how-to-send-a-json-object-using-html-form-data by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] asp.net MVC에 jQuery를 아약스 업로드 파일  (0) 2020.10.12
[JQUERY] JQuery와 AJAX의 GET 호출에서 요청 헤더 전달  (0) 2020.10.12
[JQUERY] C 번호와 ASP.NET MVC 3의 폭포 드롭 다운을 만들 수있는 가장 쉬운 방법  (0) 2020.10.12
[JQUERY] AngularJS와 - 요청 매개 변수 대신 JSON의를 보낼 수 $ http.post에 대한 모든 방법은?  (0) 2020.10.12
[JQUERY] 다시로드하는 방법 / jQuery를의 요소 (이미지)를 새로 고침  (0) 2020.10.12
,

티스토리툴바