jQuery के बिना किसी फ़ॉर्म को क्रमबद्ध करने के लिए कैसे?

Question

कई कारणों से (सबसे पहले: जावास्क्रिप्ट सीखना), मुझे jQuery के बिना एक फॉर्म को क्रमबद्ध करने की आवश्यकता है, और परिणामी धारावाहिक डेटा-संरचना को AJAX के साथ एक php पेज पर भेजना है। क्रमबद्ध डेटा JSON प्रारूप में होना चाहिए।

मैं यह कैसे कर सकता हूं?

--EDIT--

यह कैसे मेरी प्रपत्र लग रहा है की तरह है: http://jsfiddle.net/XGD4X/

Answer 1

मैं एक ऐसी ही समस्या पर काम कर रहा हूँ, और मैं मानता हूँ कि यह पहली बार कार्यक्रम के लिए कैसे जानने के लिए एक का उपयोग किए बिना सार्थक ढांचा। मैं जानकारी को पकड़ने के लिए डेटा ऑब्जेक्ट (बीपी.reading) का उपयोग कर रहा हूं, मेरे मामले में ब्लड प्रेशर रीडिंग। फिर JSON.stringify (dataObj) आपके लिए काम खुराक देता है।

यहां 'सेव' बटन क्लिक के लिए हैंडलर है, जो डेटाऑब पर एक विधि है। नोट मैं डेटा इनपुट करने के लिए तालिका के बजाय एक फॉर्म का उपयोग कर रहा हूं, लेकिन एक ही विचार लागू होना चाहिए।

update: function() { 
      var arr = document.getElementById("BP_input_form").firstChild.elements, 
       request = JDK.makeAjaxPost(); // simple cross-browser httpxmlrequest with post headings preset 

      // gather the data and store in this data obj 
      this.name = arr[0].value.trim(); 
      ... 
      this.systolic = arr[3].value; 
      this.diastolic = arr[4].value; 

      // still testing so just put server message on page 
      request.callback = function (text) { 
       msgDiv.innerHTML += 'server said ' + text; 
      }; 
      // 
      request.call("BP_update_server.php", JSON.stringify(this)); 
     } 

मुझे आशा है कि यह उपयोगी है

* संपादित मेरी कार्यक्रम में जेनेरिक वर्जन *

दिखाने के लिए, मैं वस्तुओं का उपयोग कर रहा भेजने, प्राप्त करने, प्रदर्शित करने के लिए, और इनपुट के एक ही तरह डेटा, तो मेरे पास पहले से ही ऑब्जेक्ट तैयार हैं। एक त्वरित समाधान के लिए आप केवल एक खाली वस्तु का उपयोग कर सकते हैं और इसमें डेटा जोड़ सकते हैं। यदि डेटा एक ही प्रकार के डेटा का एक सेट है तो बस एक सरणी का उपयोग करें। हालांकि, किसी ऑब्जेक्ट के साथ आपके पास सर्वर पक्ष पर उपयोगी नाम हैं। यहां एक अधिक सामान्य संस्करण अनचाहे है, लेकिन jslint पारित किया गया है।

function postUsingJSON() { 
    // collect elements that hold data on the page, here I have an array 
    var elms = document.getElementById('parent_id').elements, 
     // create a post request object 
     // JDK is a namespace I use for helper function I intend to use in other 
     // programs or that i use over and over 
     // makeAjaxPost returns a request object with post header prefilled 
     req = JDK.makeAjaxPost(), 
     // create object to hold the data, or use one you have already 
     dataObj = {}, // empty object or use array dataArray = [] 
     n = elms.length - 1;  // last field in form 

    // next add the data to the object, trim whitespace 
    // use meaningful names here to make it easy on the server side 
    dataObj.dataFromField0 = elms[0].value.trim(); // dataArray[0] = 
    //  .... 
    dataObj.dataFromFieldn = elms[n].value; 

    // define a callback method on post to use the server response 
    req.callback = function (text) { 
     // ... 
    }; 

    // JDK.makeAjaxPost.call(ULR, data) 
    req.call('handle_post_on_server.php', JSON.stringify(dataObj)); 
} 

शुभकामनाएँ।

Answer 2

CoffeeScript कार्यान्वयन किसी GET क्वेरी स्ट्रिंग लौटने:

serialize = (form) -> 
    enabled = [].filter.call form.elements, (node) -> not node.disabled 
    pairs = [].map.call enabled, (node) -> 
    encoded = [node.name, node.value].map(encodeURIComponent) 
    encoded.join '=' 
    pairs.join '&' 

या आप मुख्य-मान नक्शा पसंद करते हैं:

serialize = (form) -> 
    data = {} 
    for node in form.elements when not node.disabled and node.name 
    data[node.name] = node.value 
    data 

मैं jQuery के कार्यान्वयन को देखा नहीं किया है, इसलिए कोई 100% संगतता की गारंटी है।