วิธีส่งออบเจ็กต์ JSON โดยใช้ข้อมูลแบบฟอร์ม html

130

ดังนั้นฉันจึงมีรูปแบบ 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));

ผมทำอะไรผิดหรือเปล่า?

— kstratis
แหล่งที่มา

1

ลองดู$.ajaxและserializeใน jQuery API

— Rory McCrossan

1

จำเป็นต้องเป็นวัตถุ JSON หรือไม่? วัตถุควรมีโครงสร้างอย่างไร

— Anthony Grist

1

@AnthonyGrist ใช่มันต้องเป็น JSON เพราะมันถูกส่งไปยังบริการ ReST

— kstratis

4

“ ดูเหมือนจะไม่ได้ผล” หมายความว่าอย่างไร จำไว้ว่าเราไม่เห็นหน้าจอของคุณ

— Dour High Arch

2

@ Konos5 - REST ไม่มีส่วนเกี่ยวข้องกับ JSON ไม่ต้องการให้ข้อมูลอยู่ในรูปแบบเฉพาะใด ๆ

— danielm

136

รับข้อมูลแบบฟอร์มที่สมบูรณ์เป็นอาร์เรย์และ json สตริง

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

คุณสามารถใช้ในภายหลังได้ใน ajax หรือถ้าคุณไม่ได้ใช้ ajax; วางไว้ใน textarea ที่ซ่อนอยู่และส่งไปยังเซิร์ฟเวอร์ ถ้าข้อมูลนี้จะถูกส่งเป็นสตริง JSON ผ่านข้อมูลแบบปกติแล้วคุณจะต้องถอดรหัสโดยใช้ json_decode จากนั้นคุณจะได้รับข้อมูลทั้งหมดในอาร์เรย์

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

— SachinGutte
แหล่งที่มา

4

คุณติดแท็กคำถามด้วย jQuery คุณใช้มันหรือเปล่า? ด้วย$.ajaxการส่งผ่านข้อมูลนี้ง่ายมาก

— SachinGutte

52

HTML ไม่มีวิธีสร้าง JSON จากข้อมูลแบบฟอร์ม

หากคุณต้องการจัดการจากไคลเอนต์จริงๆคุณจะต้องใช้ JavaScript เพื่อ:

รวบรวมข้อมูลของคุณจากแบบฟอร์มผ่าน DOM
จัดระเบียบในวัตถุหรืออาร์เรย์
สร้าง JSON ด้วยJSON.stringify
โพสต์ด้วยXMLHttpRequest

คุณน่าจะดีกว่าที่จะยึดติดกับapplication/x-www-form-urlencodedข้อมูลและประมวลผลบนเซิร์ฟเวอร์แทน JSON แบบฟอร์มของคุณไม่มีลำดับชั้นที่ซับซ้อนซึ่งจะได้รับประโยชน์จากโครงสร้างข้อมูล JSON

อัปเดตเพื่อตอบสนองต่อการเขียนซ้ำครั้งใหญ่ของคำถาม ...

JS ของคุณไม่มี readystatechangeตัวจัดการดังนั้นคุณจึงไม่ต้องดำเนินการใด ๆ กับการตอบสนอง
คุณทริกเกอร์ JS เมื่อคลิกปุ่มส่งโดยไม่ยกเลิกการทำงานเริ่มต้น เบราว์เซอร์จะส่งแบบฟอร์ม (ด้วยวิธีปกติ) ทันทีที่ฟังก์ชัน JS เสร็จสมบูรณ์

— เควนติน
แหล่งที่มา

1

ตกลงแล้วฉันจะแก้ไขได้อย่างไร

— kstratis

1

@Quentin: ในกรณีของฉันฉันต้องการโพสต์ข้ามโดเมนโดยไม่มีการควบคุมโดเมน

— user2284570

1

@ user2284570 - หากคุณมีคำถามใหม่แล้วถามอย่างใดอย่างหนึ่ง

— Quentin

1

มีข้อเสนอสำหรับการเพิ่มenctype='application/json'คำจำกัดความของฟอร์มเพื่อสร้างข้อมูล JSON w3.org/TR/html-json-forms

— EkriirkE

4

@EkriirkE - คุณอ่านหน้านั้นแล้วหรือยัง? มันบอกว่าในกล่องขนาดใหญ่ที่มีแถบอันตรายสีดำและสีเหลืองรอบตัวระวัง ข้อกำหนดนี้ไม่ได้อยู่ในการบำรุงรักษาอีกต่อไปและคณะทำงาน HTML ไม่ได้ตั้งใจที่จะบำรุงรักษาต่อไป

— Quentin

3

รหัสของคุณใช้ได้ แต่ไม่เคยดำเนินการสาเหตุของปุ่ม submit [type = "submit"] เพียงแค่แทนที่ด้วยปุ่ม type =

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

ภายในสคริปต์ของคุณ ไม่ได้ประกาศแบบฟอร์ม

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

— tdjprog
แหล่งที่มา

พิมพ์ = "button" อย่างถูกต้องมีความสำคัญมากถ้าไม่ใช้มันจะเปลี่ยนเส้นทางด้วย url params

— 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]สำหรับ got an object ในตัวอย่างข้างต้นเราได้รับข้อมูลที่มี JSON ดังต่อไปนี้:

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

— orafaelreis
แหล่งที่มา

1

คุณสามารถลองทำสิ่งต่างๆเช่น:

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

— Hasan A Yousef
แหล่งที่มา