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

मैं क्या गलत कर रहा हूं?

— kstratis
स्रोत

1

एक नज़र डालें $.ajaxऔर serializejQuery एपीआई में।

— रोरी मैकक्रॉसन

1

क्या यह बिल्कुल एक JSON ऑब्जेक्ट होना चाहिए? ऑब्जेक्ट में क्या संरचना होनी चाहिए?

— एंथनी ग्रिस्ट

1

@AnthonyGrist हाँ, इसे JSON कारण होना चाहिए क्योंकि यह एक ReST सेवा की ओर संबोधित है।

— कुश्तीटिस

4

"क्या काम नहीं करता है" का मतलब है? याद रखें, हम आपकी स्क्रीन नहीं देख सकते हैं।

— डोर हाई आर्क

2

@ Konos5 - REST का JSON से कोई लेना-देना नहीं है। यह आवश्यक नहीं है कि डेटा किसी विशेष प्रारूप में हो।

— डेनियल

136

सरणी और json के रूप में पूर्ण प्रपत्र डेटा प्राप्त करें इसे कड़ा करें।

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

आप इसे बाद में अजाक्स में उपयोग कर सकते हैं। या अगर आप अजाक्स का उपयोग नहीं कर रहे हैं; इसे छिपी हुई टेक्स्टारिया में डालें और सर्वर को पास करें। यदि यह डेटा सामान्य फॉर्म डेटा के माध्यम से json string के रूप में पास किया जाता है तो आपको json_decode का उपयोग करके इसे डीकोड करना होगा । फिर आपको एक सरणी में सभी डेटा मिलेंगे।

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

— SachinGutte
स्रोत

4

आपने jQuery के साथ प्रश्न टैग किया है। तो क्या आप इसका उपयोग कर रहे हैं? साथ $.ajaxयह वास्तव में आसान है इस डेटा पारित करने के लिए।

— सचिनगुटे

51

HTML फॉर्म डेटा से JSON उत्पन्न करने का कोई तरीका प्रदान नहीं करता है।

यदि आप वास्तव में ग्राहक से इसे संभालना चाहते हैं, तो आपको जावास्क्रिप्ट का उपयोग करना होगा:

DOM के माध्यम से फॉर्म से अपना डेटा इकट्ठा करें
इसे किसी ऑब्जेक्ट या एरे में व्यवस्थित करें
JSON.stringify के साथ JSON उत्पन्न करें
इसे XMLHttpRequest के साथ पोस्ट करें

आप शायद application/x-www-form-urlencodedJSON के बजाय सर्वर पर डेटा और प्रसंस्करण से चिपके रहना बेहतर होगा । आपके फॉर्म में कोई जटिल पदानुक्रम नहीं है जो JSON डेटा संरचना से लाभान्वित होगा।

प्रश्न के प्रमुख पुनर्लेखन के जवाब में अपडेट करें ...

आपके जेएस के पास कोई readystatechangeहैंडलर नहीं है , इसलिए आप प्रतिक्रिया के साथ कुछ भी नहीं करते हैं
डिफ़ॉल्ट व्यवहार को रद्द किए बिना सबमिट बटन पर क्लिक करने पर आप JS को ट्रिगर करते हैं। जेएस फ़ंक्शन पूरा होते ही ब्राउज़र फॉर्म (नियमित तरीके से) सबमिट करेगा।

— क्वेंटिन
स्रोत

1

ठीक है, तो मैं इसे कैसे ठीक करूं?

— kstratis

1

@ क्वेंटिन: मेरे मामले में मुझे डोमेन नियंत्रण के बिना क्रॉस डोमेन POST की आवश्यकता है।

— user2284570

1

@ user2284570 - यदि आपके पास कोई नया प्रश्न है, तो एक से पूछें ।

— क्वेंटिन

1

enctype='application/json'JSON डेटा w3.org/TR/html-json-forms

— EkriirkE

4

@EkriirkE - क्या आपने वह पेज पढ़ा है? यह कहता है, एक बड़े बॉक्स में एक काले और पीले रंग के खतरे के साथ उसके चारों ओर पट्टी । यह विनिर्देश अब सक्रिय रखरखाव में नहीं है और HTML वर्किंग ग्रुप इसे आगे बनाए रखने का इरादा नहीं रखता है।

— क्वेंटिन

3

आप कोड ठीक है, लेकिन कभी निष्पादित नहीं किया गया है, सबमिट बटन का कारण [टाइप = "सबमिट"] बस इसे टाइप = बटन द्वारा प्रतिस्थापित करें

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

अपनी स्क्रिप्ट के अंदर; फॉर्म घोषित नहीं किया गया है।

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

— tdjprog
स्रोत

सटीक प्रकार = "बटन" बहुत महत्वपूर्ण है, यदि उपयोग नहीं किया जाता है तो यह url params के साथ रीडायरेक्ट करता है।

— रोहित पराते

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>

— हसन ए यूसेफ
स्रोत