এইচটিএমএল ফর্ম ডেটা ব্যবহার করে কীভাবে জেএসএন বস্তু প্রেরণ করবেন


128

সুতরাং আমি এই এইচটিএমএল ফর্ম পেয়েছি:

<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
JQuery API এ $.ajaxএবং একবার দেখুন serialize
ররি ম্যাকক্রসন

1
এটি কি একেবারে JSON অবজেক্ট হতে হবে? বস্তুর কী কাঠামো থাকা উচিত?
অ্যান্টনি গ্রিস্ট

1
@ অ্যান্টনিগ্রিস্ট হ্যাঁ এটি একটি জেএসএন হতে হবে কারণ এটি একটি আরএসটি পরিষেবাটির দিকে সম্বোধন করা হয়েছে।
kstratis

4
"কাজ করে বলে মনে হচ্ছে না" এর অর্থ কী? মনে রাখবেন, আমরা আপনার পর্দা দেখতে পাচ্ছি না।
ডোর হাই আর্চ

2
@ কনোস 5 - জেএসএনের সাথে REST এর কোনও যোগসূত্র নেই। এটি কোনও নির্দিষ্ট বিন্যাসে থাকা দরকার নেই।
ড্যানিয়েলম

উত্তর:


135

অ্যারের হিসাবে সম্পূর্ণ ফর্ম ডেটা পান এবং এতে জসন স্ট্রিংফাই করুন।

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

আপনি এজ্যাক্সে এটি পরে ব্যবহার করতে পারেন। বা আপনি যদি অজ্যাক্স ব্যবহার করছেন না; এটি লুকানো টেক্সারিয়ায় রেখে সার্ভারে প্রবেশ করুন। এই তথ্যটি যদি সাধারণ ফর্ম ডেটার মাধ্যমে জসন স্ট্রিং হিসাবে পাস করা হয় তবে আপনাকে json_decode ব্যবহার করে ডিকোড করতে হবে । তারপরে আপনি একটি অ্যারেতে সমস্ত ডেটা পাবেন।

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

4
আপনি jQuery এর সাথে প্রশ্ন ট্যাগ করেছেন। তাহলে আপনি এটি ব্যবহার করছেন? এর সাথে $.ajaxএই ডেটাটি পাস করা সত্যিই সহজ।
শচীনগুটে 10

51

এইচটিএমএল ফর্ম ডেটা থেকে জেএসএন উত্পন্ন করার কোনও উপায় সরবরাহ করে না।

আপনি যদি সত্যই এটি ক্লায়েন্টের কাছ থেকে পরিচালনা করতে চান, তবে আপনাকে এখানে জাভাস্ক্রিপ্ট ব্যবহার করে অবলম্বন করতে হবে:

  1. DOM এর মাধ্যমে ফর্মটি থেকে আপনার ডেটা সংগ্রহ করুন
  2. এটি কোনও বস্তু বা অ্যারেতে সংগঠিত করুন
  3. JSON.stringify দিয়ে JSON উত্পন্ন করুন
  4. এটি এক্সএমএলএইচটিটিপিউরেস্টের সাথে পোস্ট করুন

আপনি সম্ভবত application/x-www-form-urlencodedJSON এর পরিবর্তে সার্ভারে ডেটা আটকে থাকা এবং প্রক্রিয়াকরণ করা থেকে ভাল be আপনার ফর্মের কোনও জটিল শ্রেণিবিন্যাস নেই যা কোনও JSON ডেটা কাঠামো থেকে উপকৃত হবে।


প্রশ্নের প্রধান পুনর্লিখনের জবাবে আপডেট করুন ...

  • আপনার জেএসের কোনও readystatechangeহ্যান্ডলার নেই, সুতরাং আপনি প্রতিক্রিয়া দিয়ে কিছুই করবেন না
  • ডিফল্ট আচরণ বাতিল না করে সাবমিট বাটন ক্লিক করা হলে আপনি জেএস ট্রিগার করেন। জেএস ফাংশনটি শেষ হওয়ার সাথে সাথে ব্রাউজারটি ফর্মটি (নিয়মিত উপায়ে) জমা দেবে।

1
ঠিক আছে, তাহলে আমি কীভাবে এটি ঠিক করব?
kstratis

1
@ কুইন্টিন: আমার ক্ষেত্রে আমার ডোমেন নিয়ন্ত্রণ ছাড়াই ক্রস ডোমেন পোষ্টের দরকার।
ব্যবহারকারী 2284570

1
@ ব্যবহারকারী 2284570 - আপনার যদি নতুন প্রশ্ন থাকে তবে একটি জিজ্ঞাসা করুন
কোয়ান্টিন

1
সেখানে যোগ করার জন্য একটি প্রস্তাব হল enctype='application/json'ফর্ম সংজ্ঞা JSON তথ্য তৈরি করতে w3.org/TR/html-json-forms
EkriirkE

4
@ একরিয়ার্কে - আপনি কি এই পৃষ্ঠাটি পড়েছেন? এটি বলে, এর চারপাশে একটি কালো এবং হলুদ বিপদের ফালাযুক্ত একটি বিশাল বাক্সে সাবধান হন। এই স্পেসিফিকেশনটি আর সক্রিয় রক্ষণাবেক্ষণে নেই এবং এইচটিএমএল ওয়ার্কিং গ্রুপ এটিকে আরও বজায় রাখার ইচ্ছা করে না।
কোয়ান্টিন

3

আপনার কোডটি ঠিক আছে তবে কখনও কার্যকর হয় নি, জমা বোতামের কারণ [টাইপ = "সাবমিট করুন"] কেবল টাইপ = বোতাম দ্বারা এটি প্রতিস্থাপন করুন

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

আপনার স্ক্রিপ্ট ভিতরে; ফর্ম ঘোষণা করা হয় না।

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

হুবহু টাইপ করুন = "বোতাম" খুব গুরুত্বপূর্ণ, যদি এটি ব্যবহার না করে থাকে তবে এটি ইউআরএল প্যারামের সাথে পুনর্নির্দেশ করে।
রোহিত পার্ট

1

আমি দেরি করে ফেলেছি তবে যাদের কেবল একটি এইচটিএমএল ব্যবহার করে একটি জিনিস প্রয়োজন তাদের জন্য আমার বলতে হবে, এখানে একটি উপায় আছে। পিএইচপি এর মতো কিছু সার্ভার সাইড ফ্রেমওয়ার্কগুলিতে আপনি নিম্নলিখিত কোডটি লিখতে পারেন:

<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"
 }
}
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.