আমি কীভাবে পিএইচপি থেকে জাভাস্ক্রিপ্টে ভেরিয়েবল এবং ডেটা পাস করব?


664

আমার পিএইচপি-তে একটি পরিবর্তনশীল রয়েছে এবং আমার জাভাস্ক্রিপ্ট কোডে এর মান প্রয়োজন। আমি কীভাবে আমার পরিবর্তনশীল পিএইচপি থেকে জাভাস্ক্রিপ্টে পেতে পারি?

আমার কাছে এমন কোড রয়েছে যা দেখতে দেখতে:

<?php
     ...
     $val = $myService->getValue(); // Makes an API and database call
?>

আমার কাছে জাভাস্ক্রিপ্ট কোড রয়েছে যা valএর লাইনগুলির সাথে প্রয়োজন এবং দেখায়:

<script>
    myPlugin.start($val); // I tried this, but it didn't work
    <?php myPlugin.start($val); ?> // This didn't work either
    myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails
</script>

2
অনুপস্থিত বন্ধনী প্রথম myPlugin.start(<?=$val?>উদ্দেশ্য ছিল? এটা কি সত্য যে "এটি কখনও কখনও কাজ করে"?
অ্যান্ড্রু

2
আসলে এইটি আসলে বেনের হাতে ছিল, তবে কেবলমাত্র এটিই বলা যাক যে $ "42)"ভাল হলে এটি ভালভাবে কাজ করবে: ডি
মাদারার ঘোস্ট

উত্তর:


877

এটি করার জন্য বেশ কয়েকটি পদ্ধতি রয়েছে। কিছু অন্যের চেয়ে বেশি ওভারহেড প্রয়োজন, এবং কিছু অন্যদের চেয়ে ভাল হিসাবে বিবেচিত হয়।

কোনও নির্দিষ্ট ক্রমে:

  1. সার্ভার থেকে আপনার প্রয়োজনীয় ডেটা পেতে এজ্যাক্স ব্যবহার করুন।
  2. পৃষ্ঠায় কোথাও ডেটা প্রতিধ্বনি করুন এবং DOM থেকে তথ্য পেতে জাভাস্ক্রিপ্ট ব্যবহার করুন।
  3. সরাসরি জাভাস্ক্রিপ্টে ডেটা প্রতিধ্বনি করুন।

এই পোস্টে, আমরা উপরের প্রতিটি পদ্ধতি পরীক্ষা করব এবং প্রতিটিটির উপকারিতা এবং এর পাশাপাশি কীভাবে সেগুলি প্রয়োগ করব তা দেখুন।

1. সার্ভার থেকে আপনার প্রয়োজনীয় ডেটা পেতে এজ্যাক্স ব্যবহার করুন

এই পদ্ধতিটি সেরা হিসাবে বিবেচিত হয়, কারণ আপনার সার্ভারের পাশ এবং ক্লায়েন্টের সাইড স্ক্রিপ্টগুলি সম্পূর্ণ পৃথক

পেশাদাররা

  • স্তরগুলির মধ্যে আরও ভাল বিভাজন - যদি আগামীকাল আপনি পিএইচপি ব্যবহার বন্ধ করে দেন এবং কোনও সার্লেট, একটি আরএসটি এপিআই বা অন্য কোনও পরিষেবাতে যেতে চান তবে আপনাকে জাভাস্ক্রিপ্ট কোডটির বেশি পরিবর্তন করতে হবে না।
  • আরও পঠনযোগ্য - জাভাস্ক্রিপ্ট হল জাভাস্ক্রিপ্ট, পিএইচপি পিএইচপি। দুটি মিশ্রণ না করেই আপনি উভয় ভাষায় আরও পঠনযোগ্য কোড পান।
  • অ্যাসিক্রোনাস ডেটা স্থানান্তর করার অনুমতি দেয় - পিএইচপি থেকে তথ্য নেওয়া সময় / সংস্থান ব্যয়বহুল হতে পারে। কখনও কখনও আপনি কেবল তথ্যের জন্য অপেক্ষা করতে চান না, পৃষ্ঠাটি লোড করুন এবং যখনই তথ্য পৌঁছাতে চান।
  • মার্কআপে ডেটা সরাসরি পাওয়া যায় না - এর অর্থ হ'ল আপনার মার্কআপটি কোনও অতিরিক্ত ডেটা থেকে পরিষ্কার রাখা হয়েছে এবং কেবল জাভাস্ক্রিপ্ট এটিকে দেখে।

কনস

  • লেটেন্সি - এজেএক্স একটি এইচটিটিপি অনুরোধ তৈরি করে এবং এইচটিটিপি অনুরোধগুলি নেটওয়ার্কের মাধ্যমে বহন করে এবং নেটওয়ার্কের বিলম্ব রয়েছে।
  • রাজ্য - পৃথক এইচটিটিপি অনুরোধের মাধ্যমে প্রাপ্ত ডেটাতে এইচটিএমএল দস্তাবেজ আনার জন্য এইচটিটিপি অনুরোধের কোনও তথ্য অন্তর্ভুক্ত করবে না। আপনার এই তথ্যের প্রয়োজন হতে পারে (উদাঃ, যদি কোনও HTML নথি কোনও ফর্ম জমা দেওয়ার প্রতিক্রিয়া হিসাবে তৈরি করা হয়) এবং, আপনি যদি করেন তবে এটি কোনওরকমভাবে স্থানান্তর করতে হবে। আপনি যদি পৃষ্ঠায় ডেটা এম্বেড করার বিষয়টি অস্বীকার করেন (যা আপনি যদি এই কৌশলটি ব্যবহার করে থাকেন) তবে এটি আপনাকে কুকিজ / সেশনের মধ্যে সীমাবদ্ধ করে রেস শর্তের সাথে সম্পর্কিত হতে পারে।

বাস্তবায়ন উদাহরণ

AJAX এর সাথে আপনার দুটি পৃষ্ঠাগুলি দরকার, একটি যেখানে পিএইচপি আউটপুট উত্পন্ন করে এবং দ্বিতীয়টি যেখানে জাভাস্ক্রিপ্ট সেই আউটপুট পায়:

পেতে-data.php

/* Do some operation here, like talk to the database, the file-session
 * The world beyond, limbo, the city of shimmers, and Canada.
 *
 * AJAX generally uses strings, but you can output JSON, HTML and XML as well.
 * It all depends on the Content-type header that you send with your AJAX
 * request. */

echo json_encode(42); // In the end, you need to echo the result.
                      // All data should be json_encode()d.

                      // You can json_encode() any value in PHP, arrays, strings,
                      //even objects.

index.php (বা যা প্রকৃত পৃষ্ঠার নাম দেওয়া হয়েছে)

<!-- snip -->
<script>
    function reqListener () {
      console.log(this.responseText);
    }

    var oReq = new XMLHttpRequest(); // New request object
    oReq.onload = function() {
        // This is where you handle what to do with the response.
        // The actual data is found on this.responseText
        alert(this.responseText); // Will alert: 42
    };
    oReq.open("get", "get-data.php", true);
    //                               ^ Don't block the rest of the execution.
    //                                 Don't wait until the request finishes to
    //                                 continue.
    oReq.send();
</script>
<!-- snip -->

দুটি ফাইলের উপরের সংমিশ্রণটি সতর্ক করবে 42 ফাইলটি লোডিং শেষ করার পরে ।

আরও কিছু পড়ার উপাদান

2. পৃষ্ঠায় কোথাও ডেটা প্রতিধ্বনি করুন এবং ডওএম থেকে তথ্য পেতে জাভাস্ক্রিপ্ট ব্যবহার করুন

এই পদ্ধতিটি এজেএক্সের চেয়ে কম পছন্দনীয় তবে এটির এর সুবিধাগুলি এখনও রয়েছে। এটি এখনও তুলনামূলকভাবে পিএইচপি এবং জাভাস্ক্রিপ্টের মধ্যে পৃথকভাবে এই অর্থে যে জাভাস্ক্রিপ্টে সরাসরি কোনও পিএইচপি নেই।

পেশাদাররা

  • দ্রুত - ডোম ক্রিয়াকলাপগুলি প্রায়শই দ্রুত হয় এবং আপনি তুলনামূলকভাবে দ্রুত প্রচুর ডেটা সঞ্চয় এবং অ্যাক্সেস করতে পারেন।

কনস

  • সম্ভাব্য আনসেমেন্টিক মার্কআপ - সাধারণত যা হয় তা হ'ল <input type=hidden>তথ্য সংরক্ষণ করার জন্য আপনি কিছু প্রকারের ব্যবহার করেন কারণ তথ্যগুলি সহজেই খুঁজে পাওয়া সহজ inputNode.valueতবে তা করার অর্থ আপনার HTML এ অর্থহীন উপাদান রয়েছে। এইচটিএমএলটিতে <meta>নথির বিষয়ে ডেটাগুলির উপাদান রয়েছে এবং এইচটিএমএল 5 data-*জাভা স্ক্রিপ্টের সাথে পড়ার জন্য বিশেষভাবে ডেটার জন্য বৈশিষ্ট্যগুলি উপস্থাপন করে যা নির্দিষ্ট উপাদানগুলির সাথে সম্পর্কিত হতে পারে।
  • উত্সটি সূচনা করে - পিএইচপি যে ডেটা উত্পন্ন করে তা সরাসরি এইচটিএমএল উত্সে আউটপুট করা হয় যার অর্থ আপনি একটি বৃহত এবং কম ফোকাসযুক্ত HTML উত্স পান।
  • কাঠামোগত ডেটা পাওয়া আরও শক্ত - কাঠামোগত ডেটা বৈধ এইচটিএমএল হতে হবে, অন্যথায় আপনাকে পালাতে হবে এবং স্ট্রিংগুলি নিজেই রূপান্তর করতে হবে।
  • আপনার ডেটা যুক্তিতে পিএইচপিটি কঠোরভাবে দম্পতিরা - পিএইচপি উপস্থাপনায় ব্যবহৃত হওয়ায় আপনি দুটি পরিষ্কারভাবে আলাদা করতে পারবেন না।

বাস্তবায়ন উদাহরণ

এটির সাহায্যে ধারণাটি এমন কিছু উপাদান তৈরি করা যা ব্যবহারকারীর কাছে প্রদর্শিত হবে না, তবে জাভাস্ক্রিপ্টে দৃশ্যমান।

index.php

<!-- snip -->
<div id="dom-target" style="display: none;">
    <?php
        $output = "42"; // Again, do some operation, get the output.
        echo htmlspecialchars($output); /* You have to escape because the result
                                           will not be valid HTML otherwise. */
    ?>
</div>
<script>
    var div = document.getElementById("dom-target");
    var myData = div.textContent;
</script>
<!-- snip -->

৩. সরাসরি জাভাস্ক্রিপ্টে ডেটা প্রতিধ্বনি করুন

এটি সম্ভবত বোঝার পক্ষে সহজ।

পেশাদাররা

  • খুব সহজেই প্রয়োগ করা হয়েছে - এটি বাস্তবায়ন করতে, এবং বুঝতে খুব কম লাগে।
  • নোংরা উত্স নয় - ভেরিয়েবলগুলি সরাসরি জাভাস্ক্রিপ্টে আউটপুট করা হয়, সুতরাং DOM প্রভাবিত হয় না।

কনস

  • আপনার ডেটা যুক্তিতে পিএইচপিটি কঠোরভাবে দম্পতিরা - পিএইচপি উপস্থাপনায় ব্যবহৃত হওয়ায় আপনি দুটি পরিষ্কারভাবে আলাদা করতে পারবেন না।

বাস্তবায়ন উদাহরণ

বাস্তবায়ন তুলনামূলকভাবে সহজ:

<!-- snip -->
<script>
    var data = <?php echo json_encode("42", JSON_HEX_TAG); ?>; // Don't forget the extra semicolon!
</script>
<!-- snip -->

শুভকামনা!


70
"পিএইচপি-তে কোনও তুচ্ছ জাভাস্ক্রিপ্টের পালানোর ফাংশন নেই" - এতে কী ভুল json_encode?
কুইন্টিন

34
আমি "অত্যন্ত নিরাপত্তাহীন !!" এর সাথে একমত নই এবং "কাঠামোগত ডেটা শক্ত"। JSON হিসাবে ডেটা এনকোড করুন ( জাভাস্ক্রিপ্ট অবজেক্ট নোটেশন, সর্বোপরি), এবং আপনি সেখানে যান!
এল.স্পেস্কো

14
একটি এজেএক্স অনুরোধ করার সময় উল্লেখযোগ্য ওভারহেড এবং কোড জটিলতার অ্যাসিঙ্ক্রোনোসিটি সম্পর্কে কী বলা যায়? একটি জাভাস্ক্রিপ্ট লাইট ওয়েবসাইটে কাজ করার সময় - একটি এজেএক্স অনুরোধ করা ক্লান্তিকর এবং সেরা অভ্যাস নয়।
বেনিয়ামিন গ্রুইনবাউম

8
@ বেঞ্জামিনগ্রুয়েনবাউম - জেএস অবৈধ জেএসএন অপ্রাসঙ্গিক is অ্যাসাইনমেন্টের ডানদিকে জাভাস্ক্রিপ্টে অবৈধ যে কোনও জেএসএন আমি ভাবতে পারি না।
কোয়ান্টিন

7
@ সেকানড্রিকুডো পদ্ধতি 3 এ, উদাহরণটি ওয়েবসাইটকে হত্যা করতে পারে। উদাহরণ: <?php $output = '<!--<script>'; echo json_encode($output); ?>। বিস্তারিত জানতে এই প্রশ্নটি দেখুন । সমাধান: JSON_HEX_TAGপালাতে ব্যবহার করুন <এবং >(পিএইচপি 5.3.0 প্রয়োজন)।
প্যাং

90

আমি একটি সহজ উত্তর চেষ্টা করতে যাচ্ছি:

সমস্যার ব্যাখ্যা

প্রথমত, যখন আমাদের সার্ভার থেকে কোনও পৃষ্ঠা পরিবেশন করা হয় তখন ইভেন্টগুলির প্রবাহটি বুঝতে পারি:

  • প্রথম পিএইচপি চালিত হয়, এটি ক্লায়েন্টের কাছে পরিবেশন করা এইচটিএমএল তৈরি করে।
  • তারপরে, এইচটিএমএল ক্লায়েন্টের কাছে পৌঁছে দেওয়া হয়, পিএইচপি এটির পরে, আমি জোর দিয়ে বলতে চাই যে কোডটি একবার সার্ভার ছেড়ে গেলে - পিএইচপি এটি দিয়ে হয়ে যায় এবং এটি আর অ্যাক্সেস করতে পারে না।
  • তারপরে, জাভাস্ক্রিপ্ট সহ এইচটিএমএল ক্লায়েন্টে পৌঁছেছে, যা সেই এইচটিএমএলে জাভাস্ক্রিপ্ট কার্যকর করতে পারে।

সুতরাং সত্যিই, এখানে মূল জিনিসটি মনে রাখতে হবে যে এইচটিটিপি রাষ্ট্রহীন । একবার কোনও অনুরোধ সার্ভার ছেড়ে গেলে সার্ভারটি এটি স্পর্শ করতে পারে না। সুতরাং, এটি আমাদের বিকল্পগুলি এখানে ছেড়ে দেয়:

  1. পরে ক্লায়েন্ট থেকে আরও অনুরোধ প্রেরণ করুনপ্রাথমিক অনুরোধটি শেষ ।
  2. প্রাথমিক অনুরোধে সার্ভারের যা বলা ছিল তা এনকোড করুন।

সলিউশন

আপনার নিজের জিজ্ঞাসা করা উচিত এমন মূল প্রশ্নটি হ'ল:

আমি কি কোনও ওয়েবসাইট লিখছি বা কোনও অ্যাপ্লিকেশন?

ওয়েবসাইটগুলি মূলত পৃষ্ঠা ভিত্তিক হয় এবং পৃষ্ঠা লোডের সময়গুলি যত তাড়াতাড়ি দ্রুত হওয়া প্রয়োজন (উদাহরণস্বরূপ - উইকিপিডিয়া)। ওয়েব অ্যাপ্লিকেশনগুলি আরও এজেএক্স ভারী এবং ক্লায়েন্টের দ্রুত তথ্য (উদাহরণস্বরূপ - একটি স্টক ড্যাশবোর্ড) পেতে প্রচুর রাউন্ড ট্রিপ করে।

ওয়েবসাইট

প্রাথমিক অনুরোধটি সম্পন্ন হওয়ার পরে ক্লায়েন্টের কাছ থেকে আরও অনুরোধগুলি প্রেরণ করা ধীর গতির কারণ এটির জন্য আরও বেশি এইচটিটিপি অনুরোধের প্রয়োজন রয়েছে যার উল্লেখযোগ্য ওভারহেড রয়েছে। তদ্ব্যতীত, এটি অ্যাসিঙ্ক্রোনাসিটির প্রয়োজন কারণ একটি এজেএক্স অনুরোধটি সম্পূর্ণ হওয়ার জন্য একটি হ্যান্ডলার প্রয়োজন।

আপনার সাইটটি সার্ভার থেকে সেই তথ্য পাওয়ার জন্য কোনও আবেদন না করা না হলে আমি আর একটি অনুরোধ করার পরামর্শ দেব না

আপনি দ্রুত প্রতিক্রিয়া বার চান যা রূপান্তর এবং লোড সময়গুলিতে বিশাল প্রভাব ফেলে। এজ্যাক্স অনুরোধ করা এই ক্ষেত্রে প্রাথমিক আপটাইমের জন্য ধীর এবং বিনা শিবির।

সমস্যাটি সমাধান করার জন্য আপনার কাছে দুটি উপায় রয়েছে

  • একটি কুকি সেট করুন - কুকিগুলি এইচটিটিপি অনুরোধে প্রেরিত শিরোনাম যা সার্ভার এবং ক্লায়েন্ট উভয়ই পড়তে পারে।
  • ভেরিয়েবলটিকে JSON হিসাবে এনকোড করুন - JSON জাভাস্ক্রিপ্ট অবজেক্টের খুব কাছাকাছি দেখায় এবং বেশিরভাগ JSON অবজেক্ট বৈধ জাভাস্ক্রিপ্ট ভেরিয়েবল।

কুকি সেট করা সত্যিই খুব কঠিন নয়, আপনি কেবল এটির একটি মূল্য নির্ধারণ করুন:

setcookie("MyCookie", $value); // Sets the cookie to the value, remember, do not
                               // Set it with HTTP only to true.

তারপরে, আপনি এটি ব্যবহার করে জাভাস্ক্রিপ্ট সহ এটি পড়তে পারেন document.cookie:

এখানে একটি সংক্ষিপ্ত হাত ঘূর্ণিত পার্সার দেওয়া হয়েছে, তবে আমি উত্তরটির সাথে এটির সাথে সংযুক্ত উত্তরটি আরও ভালভাবে পরীক্ষিত হয়েছে:

var cookies = document.cookie.split(";").
    map(function(el){ return el.split("="); }).
    reduce(function(prev,cur){ prev[cur[0]] = cur[1];return prev },{});

cookies["MyCookie"] // Value set with PHP.

কুকিগুলি অল্প ডেটার জন্য ভাল। ট্র্যাকিং পরিষেবাগুলি প্রায়শই এটি করে।

আমাদের আরও ডেটা হয়ে গেলে আমরা এর পরিবর্তে একটি জাভাস্ক্রিপ্ট ভেরিয়েবলের অভ্যন্তরে এটি JSON এর সাথে এনকোড করতে পারি:

<script>
    var myServerData = <?=json_encode($value)?>; // Don't forget to sanitize
                                                 //server data
</script>

ধরে নেওয়া যাক $valueকরা হয় json_encodeপিএইচপি পাশ সক্ষম (এটা সাধারণত)। এই কৌশলটি স্ট্যাক ওভারফ্লো তার চ্যাটের সাথে উদাহরণস্বরূপ (কেবল পিএইচপি পরিবর্তে। নেট ব্যবহার করে) যা করে।

আবেদন

আপনি যদি কোনও অ্যাপ্লিকেশন লিখছেন - হঠাৎ প্রাথমিক লোড সময়টি অ্যাপ্লিকেশনটির চলমান পারফরম্যান্সের মতো সবসময় গুরুত্বপূর্ণ নয় এবং এটি আলাদাভাবে ডেটা এবং কোড লোড করার জন্য অর্থ প্রদান শুরু করে।

আমার উত্তর এখানে জাভাস্ক্রিপ্ট এজেএক্স ব্যবহার করে ডেটা লোড করার উপায় ব্যাখ্যা করে:

function callback(data){
    // What do I do with the response?
}

var httpRequest = new XMLHttpRequest;
httpRequest.onreadystatechange = function(){
    if (httpRequest.readyState === 4) { // Request is done
        if (httpRequest.status === 200) { // successfully
            callback(httpRequest.responseText); // We're calling our method
        }
    }
};
httpRequest.open('GET', "/echo/json");
httpRequest.send();

বা jQuery সহ:

$.get("/your/url").done(function(data){
    // What do I do with the data?
});

এখন, সার্ভারটিতে কেবল একটি /your/urlরুট / ফাইল থাকা দরকার যা কোড ধারণ করে যা ডেটা আঁকড়ে ধরে এর সাথে কিছু করে, আপনার ক্ষেত্রে:

<$php
     ...
     $val = myService->getValue(); // Makes an API and database call
     echo json_encode($val); // Write it to the output
 $>

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

পোস্টস্ক্রিপ্ট: আপনি যখন পিএইচপি থেকে জাভাস্ক্রিপ্টে কোনও ইনজেক্ট করেন তখন আপনাকে এক্সএসএস আক্রমণ আক্রমণকারীদের সম্পর্কে খুব সচেতন হতে হবে । এটা খুব মান সঠিকভাবে অব্যাহতি হার্ড এবং এটা প্রসঙ্গ সংবেদনশীল নয়। আপনি যদি এক্সএসএসের সাথে কীভাবে ডিল করবেন সে সম্পর্কে অনিশ্চিত হন বা এটি সম্পর্কে অবহিত হন - দয়া করে এই ওডাব্লুএসপি নিবন্ধটি পড়ুন , এটি একটি এবং এই প্রশ্নটি


4
@ সিএইচও আরও সাধারণভাবে - এনকোডিংগুলি অক্ষরের অনুক্রম হিসাবে সংজ্ঞায়িত হয় এবং ধারণাগত বস্তুর অস্তিত্ব একটি দার্শনিক বিষয়। তবে জেএসওএন অবজেক্টের মতো জিনিস রয়েছে এবং এগুলি জেএসওএন ব্যাকরণ দ্বারা সংজ্ঞায়িত করা হয়েছে। {}একটি বৈধ JSON অবজেক্ট - json.org দেখুন
বেনজামিন গ্রুয়েনবাউম

1
আপনি যদি সেই সংজ্ঞাটি ব্যবহার করেন তবে, তবে সমস্ত "জেএসএন অবজেক্টস" জেএসে বৈধ।
সিএইচও

1
@ সিএইচও সূক্ষ্মতাটি নোট করুন: জাভাস্ক্রিপ্টটির অবজেক্টের ধারণা রয়েছে এবং জেএসওএন এর অবজেক্টের ধারণা রয়েছে - সেগুলি একই নয়। লোকেরা যখন "জেএসএন অবজেক্ট" শব্দের অপব্যবহার করে তার অর্থ একটি জেএস অবজেক্ট, যেখানে জাভাস্ক্রিপ্ট ল্যান্ডে - জেএসওএন ডেটা সিরিয়ালাইজেশন ফর্ম্যাট হিসাবে ব্যবহৃত হয় এবং জেএসএন অবজেক্টগুলি স্ট্রিংয়ের অভ্যন্তরে উপস্থিত হয় (সার্ভার-সাইড ভাষাগুলিতে এসকিউএল কোয়েরির মতো ধরণের)। তবে, এই উত্তরে জেএসএন পদ্ধতিটি নির্ভর করে যে বেশিরভাগ জেএসওএন অবজেক্টগুলিও বৈধ জাভাস্ক্রিপ্ট অবজেক্ট তাই আমরা জাভাস্ক্রিপ্ট কোডে একটি জেএসএন বস্তু লিখি।
বেনজামিন গ্রুইনবাউম

1
@cHao আহ, কিন্তু আমি গতকাল :) এই মুহূর্তে foreseen থাকেন stackoverflow.com/questions/23752156/...
বেঞ্জামিন Gruenbaum

2
ঠিক আছে, আপনি আমাকে সেখানে পেয়েছেন। :) যদিও এটি এখনও নিরাপদ; পিএইচপি-র ডিফল্ট আচরণ হ'ল এই জাতীয় অক্ষরগুলি (অন্যান্য অ-এসসিআইআই অক্ষর সহ) পালাতে হয়, তাই তারা কখনই আউটপুটে প্রবেশ করে না \u2028etc. ইত্যাদি ব্যতীত আপনাকে এটিকে না করার জন্য আপনাকে স্পষ্টভাবে বলতে হবে।
সিএওও

85

আমি সাধারণত এইচটিএমএলে ডেটা- * বৈশিষ্ট্য ব্যবহার করি।

<div class="service-container" data-service="<?php echo $myService->getValue(); ?>">

</div>

<script>
    $(document).ready(function() {
        $('.service-container').each(function() {
            var container = $(this);
            var service = container.data('service');

            // Variable "service" now contains the value of $myService->getValue();
        });
    });
</script>

এই উদাহরণটি jQuery ব্যবহার করে তবে এটি অন্য গ্রন্থাগার বা ভ্যানিলা জাভাস্ক্রিপ্টের জন্য মানিয়ে নেওয়া যেতে পারে।

আপনি এখানে ডেটাसेट সম্পত্তি সম্পর্কে আরও পড়তে পারেন: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset


4
আমি একমত, একটি সাধারণ সমস্যার জন্য অভিনব সমাধান অতিরিক্ত-বিশ্লেষণ এবং বাস্তবায়ন করতে চাই না। এই পদ্ধতিটি পিএইচপিটিকে জাভাস্ক্রিপ্ট থেকে পৃথক করে, যাতে পিএইচপি এখনও কেবলমাত্র এইচটিএমএল তৈরি করে, যখন জাভাস্ক্রিপ্ট পিএইচপি ফাইলের বাহ্যিক হতে পারে।
বয়স্ক

2
আমি সম্মত এই সেরা বিকল্প। এটি সুরক্ষা সংক্রান্ত সমস্ত সমস্যা সমাধান করে, বিলম্ব ছাড়াই। আপনি জেএসকে আপনার HTML পৃষ্ঠাগুলির বাইরে রাখতে পারেন। এইচটিএমএল অ্যাপ্লিকেশন সার্ভার দ্বারা পরিবেশন করা প্রয়োজন, কিন্তু জেএস (এবং সিএসএস) না। এটি আরও শব্দার্থক।
রায়ান

1
@ কুইন্টিন আপনার আউটপুটটি এইচটিএমএল না হলে আপনার সমস্ত আউটপুট এড়ানো উচিত।
yuikonnu

2
@ এসএসএএসডি - আচ্ছা হ্যাঁ, আমি সাধারণ জবাবের চেয়ে আপনার উত্তরে কোডের সাথে সুনির্দিষ্ট সমস্যার সমাধান করছি।
কুইন্টিন

1
@ কঙ্কজি - এর চেয়ে সেরা অনুশীলন নেই; divভাল, তবে আপনি নিজের পছন্দ মতো যে কোনও ট্যাগ ব্যবহার করতে পারেন; মধ্যে হতে হয়েছে bodyযদিও।
টিম

38
<script>
  var jsvar = <?php echo json_encode($PHPVar); ?>;
</script>

json_encode () এর প্রয়োজন:

  • পিএইচপি 5.2.0 বা আরও
  • $PHPVar ইউটিএফ -8, ইউনিকোড হিসাবে এনকোড হয়েছে।

19

কেবল নীচের একটি পদ্ধতি ব্যবহার করুন।

<script type="text/javascript">
var js_variable  = '<?php echo $php_variable;?>';
<script>

অথবা

<script type="text/javascript">
    var js_variable = <?php echo json_encode($php_variable); ?>; 
</script>

4
এটি বিদ্যমান উত্তরের চেয়ে কী মান যুক্ত করে?
বেনিয়ামিন গ্রুইনবাউম

5
এটি সহজ এবং সরল রাখা। যে সমস্ত ব্যবহারকারীর কাছে গভীর ব্যাখ্যার জন্য বেশি সময় আছে তাদের জন্য
নিশান্ত মেন্ডিরাত্তা

1
সহজ আরও ভাল
ডোবারন

এটি একটি নির্বোধ প্রশ্ন হতে পারে তবে আমি পিএইচপি বিশ্বে একেবারে নতুন। আমরা যখন উপরের কোডটি। Php ফাইলটিতে লিখি, আমি কীভাবে আমার জাভাস্ক্রিপ্ট ফাইল বা "আমার সূচক। Html" ফাইলটিতে "js_variable" অ্যাক্সেস করব?
অঙ্কিত প্রজাপতি

অংকিতপ্রজাপতি নথি প্রস্তুতের স্থিতি পরীক্ষা করে এটি অ্যাক্সেস করার চেষ্টা করুন। নিম্নলিখিত স্ক্রিপ্ট ব্যবহার। document.onreadystatechange = () => { if (document.readyState === 'complete') { // document ready alert(js_variable) } };
নিশান্ত মেন্ডিরাত্ত

11

আমি ওয়ার্ডপ্রেস যেভাবে তার এনকুই এবং স্থানীয়করণের কাজগুলি নিয়ে কাজ করে তা বেশ পছন্দ করি , সুতরাং সেই মডেলটি অনুসরণ করে, স্ক্রিপ্টের নির্ভরতা অনুসারে পৃষ্ঠায় স্ক্রিপ্টগুলি লেখার জন্য এবং স্ক্রিপ্টের জন্য অতিরিক্ত ডেটা উপলব্ধ করার জন্য আমি একটি সাধারণ ক্লাস লিখেছিলাম।

class mHeader {

    private $scripts = array();

    /**
     * @param string $id        Unique script identifier
     * @param string $src      Script src attribute
     * @param array  $deps       An array of dependencies ( script identifiers ).
     * @param array  $data       An array, data that will be json_encoded and available to the script.
     */
    function enqueue_script($id, $src, $deps = array(), $data = array()) {
        $this->scripts[$id] = array('src' => $src, 'deps' => $deps, 'data' => $data);
    }

    private function dependencies($script) {
        if ($script['deps']) {
            return array_map(array($this, 'dependencies'), array_intersect_key($this->scripts, array_flip($script['deps'])));
        }
    }

    private function _unset($key, &$deps, &$out) {
        $out[$key] = $this->scripts[$key];
        unset($deps[$key]);
    }

    private function flattern(&$deps, &$out = array()) {

        foreach($deps as $key => $value) {
            empty($value) ? $this->_unset($key, $deps, $out) : $this->flattern( $deps[$key], $out);
        }
    }

    function print_scripts() {

        if (!$this->scripts)
            return;

        $deps = array_map(array($this, 'dependencies'), $this->scripts);
        while ($deps)
            $this->flattern($deps, $js);

        foreach($js as $key => $script) {
            $script['data'] && printf("<script> var %s = %s; </script>" . PHP_EOL, key($script['data']), json_encode(current( $script['data'])));
            echo "<script id=\"$key-js\" src=\"$script[src]\" type=\"text/javascript\"></script>" . PHP_EOL;
        }
    }
}

enqueue_script()ফাংশনে কলটি স্ক্রিপ্ট যুক্ত করার জন্য, অন্যান্য স্ক্রিপ্টগুলিতে উত্স এবং নির্ভরতা নির্ধারণ এবং স্ক্রিপ্টের জন্য প্রয়োজনীয় অতিরিক্ত ডেটা।

$header = new mHeader();

$header->enqueue_script('jquery-ui', '//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js', array('jquery'));
$header->enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js');
$header->enqueue_script('custom-script', '//custom-script.min.js', array('jquery-ui'), array('mydata' => array('value' => 20)));

$header->print_scripts();

এবং, print_scripts()উপরের উদাহরণের পদ্ধতিটি এই আউটপুটটি প্রেরণ করবে:

<script id="jquery-js" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script id="jquery-ui-js" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript"></script>
<script> var mydata = {"value":20}; </script>
<script id="custom-script-js" src="//custom-script.min.js" type="text/javascript"></script>

'Jquery-ui' এর পরে 'jquery' স্ক্রিপ্টটি সন্নিবেশিত হয়েছে তা নির্বিশেষে এটি আগে ছাপা হয়েছে কারণ এটি 'জ্যাকুয়ারি-ইউআই'-তে সংজ্ঞায়িত করা হয়েছে যে এটি' জ্যাকুরি '-র উপর নির্ভর করে। 'কাস্টম-স্ক্রিপ্ট' এর জন্য অতিরিক্ত ডেটা একটি নতুন স্ক্রিপ্ট ব্লকের অভ্যন্তরে রয়েছে এবং এর সামনে স্থাপন করা হয়, এতে এমন mydataঅবজেক্ট থাকে যা অতিরিক্ত ডেটা ধারণ করে, এখন 'কাস্টম-স্ক্রিপ্ট' এ উপলব্ধ।


10

এটা চেষ্টা কর:

<?php
    echo "<script> var x = " . json_encode($phpVariable) . "</script>";
?>

-

-এর পরে কিছুক্ষণ চেষ্টা করে দেখুন

যদিও এটি কাজ করে, তবে এটি কার্য সম্পাদনকে ধীর করে দেয়। যেমন পিএইচপি হ'ল সার্ভার-সাইড স্ক্রিপ্ট এবং জাভাস্ক্রিপ্ট একটি ব্যবহারকারী পক্ষ রয়েছে।


4
আমরা দীর্ঘ উত্তর খুঁজছি যা কিছু ব্যাখ্যা এবং প্রসঙ্গ সরবরাহ করে। শুধু একটি লাইনের উত্তর দেবেন না; আপনার উত্তর কেন সঠিক তা ব্যাখ্যা করুন, আদর্শভাবে উদ্ধৃতি দিয়ে। ব্যাখ্যাগুলি অন্তর্ভুক্ত না করে এমন উত্তরগুলি সরানো হতে পারে। এই প্রশ্নে লেখা হয়।
মাদারার ঘোস্ট

3
<
পি

5
তুমি কি নিশ্চিত? আপনি কি এই প্রশ্নের শীর্ষের উত্তরটি দেখেছেন? এটি বেশ কিছুটা ব্যাখ্যা করে। আপনার সমাধানটি নিরাপদ নয় তা উল্লেখ করার দরকার নেই। $phpVariable = '42"; alert("I am evil!");';
মাদারার ঘোস্ট

9
এটি আমার পরামর্শ যা আমার সমস্যার সমাধান করেছে এবং আমি পূর্ববর্তী উত্তরগুলিতে এটি পাই না তাই আমি যুক্ত করেছি, আশা করি কেউ এটি আকর্ষণীয় বলে মনে করেন
যোসরা নাগতি

1
প্রতিধ্বনি এখানে যোগ করা হয় তা এই পিএইচপি কোড হচ্ছে ওয়েব পেজে এটা মুদ্রণ বা এটা ঠিক সিনট্যাক্স JS পরিবর্তনশীল @ YosraNagati ডেটা লাগাতে অংশ হতে।
সুমিত কুমার সিং

8
myPlugin.start($val); // Tried this, didn't work

এটি কাজ করে না কারণ $valজাভাস্ক্রিপ্ট সম্পর্কিত যতটা অপরিজ্ঞাত, যেমন পিএইচপি কোড কোনও কিছুর আউটপুট দেয়নি $val। আপনার ব্রাউজারে উত্সটি দেখার চেষ্টা করুন এবং আপনি যা দেখতে পাবেন তা এখানে:

myPlugin.start(); // I tried this, and it didn't work

এবং

<?php myPlugin.start($val); ?> // This didn't work either

এটি কাজ করে না কারণ পিএইচপি myPluginএকটি ধ্রুবক হিসাবে বিবেচনা করার চেষ্টা করবে এবং যখন এটি ব্যর্থ হয় তখন এটি এটিকে স্ট্রিং হিসাবে বিবেচনা করার চেষ্টা করবে 'myPlugin'যা এটি পিএইচপি ফাংশনের আউটপুটটির সাথে মিলিত করার চেষ্টা করবেstart() এবং যেহেতু এটি অপরিবর্তিত রয়েছে এটি মারাত্মক উত্পাদন করবে ত্রুটি.

এবং

 myPlugin.start(<?=$val?> // This works sometimes, but sometimes it fails

যদিও এটি সম্ভবত সবচেয়ে বেশি কাজ করে, পিএইচপি কোডটি প্রত্যাশিত যুক্তি সহ বৈধ জাভাস্ক্রিপ্ট তৈরি করছে, যদি এটি ব্যর্থ হয় তবে সম্ভাবনাগুলি কারণ এটি myPlugin এটি এখনও প্রস্তুত নয়। আপনার কার্যকর করার আদেশ পরীক্ষা করুন।

এছাড়াও আপনাকে লক্ষ্য রাখতে হবে যে পিএইচপি কোড আউটপুটটি নিরাপত্তাহীন এবং এর সাথে ফিল্টার করা উচিত json_encode()

সম্পাদনা

কারণ আমি অনুপস্থিত প্রথম বন্ধনী লক্ষ্য করি নি myPlugin.start(<?=$val?>: - \

@ সেকেন্ড রিকুডো যেমন উল্লেখ করেছেন, এটি সঠিকভাবে কাজ $valকরার জন্য ক্লোজিং বন্ধনী থাকতে হবে, উদাহরণস্বরূপ:$val="42);"

মানে যে পিএইচপি এখন উত্পাদন myPlugin.start(42);করবে এবং যখন জাভাস্ক্রিপ্ট কোড দ্বারা সম্পাদিত হবে তখন প্রত্যাশা অনুযায়ী কাজ করবে।


JSON আপনার ডেটা এনকোড করেছে:myPlugin.start(<?=json_encode($val)?>);
কিংপ্রন

6

আমি পিএইচপি ব্যবহার করে জাভাস্ক্রিপ্ট ভেরিয়েবল নির্ধারণের জন্য একটি সহজ পদ্ধতি নিয়ে এসেছি।

এটি পিএইচপি ভেরিয়েবলগুলি সংরক্ষণ করতে এইচটিএমএল 5 ডেটা অ্যাট্রিবিউট ব্যবহার করে এবং তারপরে এটি পৃষ্ঠা লোডে জাভাস্ক্রিপ্টে বরাদ্দ করা হয়েছে।

একটি সম্পূর্ণ টিউটোরিয়াল এখানে পাওয়া যাবে

উদাহরণ:

<?php
    $variable_1 = "QNimate";
    $variable_2 = "QScutter";
?>
    <span id="storage" data-variable-one="<?php echo $variable_1; ?>" data-variable-two="<?php echo $variable_2; ?>"></span>
<?php

এখানে জাভাস্ক্রিপ্ট কোড

var variable_1 = undefined;
var variable_2 = undefined;

window.onload = function(){
    variable_1 = document.getElementById("storage").getAttribute("data-variable-one");
    variable_2 = document.getElementById("storage").getAttribute("data-variable-two");
}

2
যদিও ডেটা অ্যাট্রিবিউটগুলি সমস্যাটির যুক্তিসঙ্গত সমাধান, আপনি যদি সেগুলির ডেটা এড়িয়ে না যান তবে আপনি মূল প্রশ্নের অনুরূপ সমস্যাটি শেষ করবেন। এটি আপনাকে জেএসের পরিবর্তে এইচটিএমএলের জন্য এড়াতে হবে।
কুইন্টিন

5
  1. তথ্যটি JSON এ রূপান্তর করুন
  2. JSON ফাইলটি পেতে AJAX কে কল করুন
  3. JSON কে জাভাস্ক্রিপ্ট অবজেক্টে রূপান্তর করুন

উদাহরণ:

ধাপ 1

<?php

   $servername = "localhost";
   $username = "";
   $password = "";
   $dbname = "";
   $conn = new mysqli($servername, $username, $password, $dbname);

   if ($conn->connect_error) {
      die("Connection failed: " . $conn->connect_error);
   } 

   $sql = "SELECT id, name, image FROM phone";
   $result = $conn->query($sql);

   while($row = $result->fetch_assoc()){ 
      $v[] = $row;    
   }

  echo json_encode($v);

  $conn->close();
?>

ধাপ ২

function showUser(fnc) {
   var xhttp = new XMLHttpRequest();

   xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
         // STEP 3    
         var p = JSON.parse(this.responseText);
      }
   }
}

5

এখানে একটি আমি বিকল্প হিসাবে পোস্ট দেখতে পাচ্ছি না। এটি অ্যাজাক্স ব্যবহারের মতো, তবে স্পষ্টভাবে আলাদা।

প্রথমে কোনও স্ক্রিপ্টের উত্স সরাসরি পিএইচপি ফাইলে সেট করুন।

<script type="text/javascript" src="url_to_your_php_file.php" /></script>

এমনকি আপনি এই উদাহরণের মতো পিএইচপি ফাইলে কোনও ভেরিয়েবল পাস করতে পারেন:

<script type="text/javascript" src="url_to_your_php_file.php?var1=value1" /></script>

তারপরে "your_php_file.php" এ:

<?php
    // THIS IS A SIMPLE EXAMPLE
    // it demonstrates one method of using the src attribute to link
    // to a PHP file which can generate JavaScript code dynamically
    // and share data between PHP and JavaScript
    // you may take this learning example and develop it further
    // relying on your own coding skills for validating data
    // and avoiding errors, of course
    header('content-type: text/javascript');

    // If you pass a $_GET variable from the JavaScript
    // you should add code to validate your $_GET variable(s)

    // You can add code to query a database
    // using $_GET['var1'] or some other criteria

    // You can add simple variable assignments
    $value = 'some value';

    // For the OP's needs (assumes the class object has been defined)
    $val = $myService->getValue();
?>

function name() {
    // Pay attention because you need to use quotes properly
    // and account for possible quotes in the variable strings
    // to avoid both PHP and JavaScript errors
    // example assumes $val has been returned as a string
    // validate $val as needed using your method of choice
    var example1 = <?php echo '"' . $val . '"'; ?>;
    var example2 = <?php echo '"' . $value . '"'; ?>;
    var example3 = <?php echo '"some other data"'; ?>;
    alert( example1 + ' / ' + example2 );
}

<?php
    // You may even want to include additional files (.php or .js, etc.)
    @include 'local_path_to_some_other_js_file.js';
    @include 'local_path_to_some_other_php_file.php';

    exit;
?>

যেহেতু এইচটিএমএল তৈরি করছে তা পিএইচপি স্ক্রিপ্টে চলকটি বিদ্যমান, তাই আপনি গতিশীলভাবে উত্পন্ন করার গুরুত্বপূর্ণ পদক্ষেপটি মিস করেছেন var1=value1। এটি যেমন দাঁড়িয়েছে আপনার স্ক্রিপ্টটি ভেঙে যাচ্ছে যদি ডেটাতে একটি 'অক্ষর অন্তর্ভুক্ত থাকে ।
কুইন্টিন

@ উপস্থাপিত কোড যেমন EXAMPLE ত্রুটি ছাড়াই কাজ করে। এটি ব্যবহার প্রদর্শন করা হয়। যদি কোনও প্রোগ্রামার কোডিংয়ের এতো দূরে থাকে তবে তারা $ _GET ভেরিয়েবলের একক-কোটস / ডাবল-কোটসের প্রভাবগুলি বুঝতে পারবে - যা যাইহোক urlncoded হওয়া উচিত। var1 != [some HTML code]... পরিষ্কার var1=="value1"। স্পষ্টভাবে বলতে গেলে, আপনি ভুল যে আমি কিছু মিস করেছি। উদাহরণ স্ক্রিপ্টটি সম্পূর্ণ, এবং আপনি দেখতে পাচ্ছেন যে কোনও HTML তৈরি হচ্ছে না - এবং ওপি এইচটিএমএল উল্লেখ করেনি। এটি কিছু ট্রিগার হ্যাপি বাইপাসার দ্বারা একটি ডাউনটোটের যোগ্য নয়
ডাউনটোট

প্রশ্নের কোডটি দেখায় যে ওপি উদ্ধৃতি / পলায়ন বুঝতে পারে না। সে সম্পর্কে বোঝার অভাবই পুরো সমস্যা! উদাহরণটি সম্পূর্ণ হওয়ার পরে, প্রশ্নটিতে প্রকাশিত সমস্যাটি কীভাবে সমাধান করা যায় তার উদাহরণ নয়।
কোয়ান্টিন

@ কুইন্টিন ঠিক কীভাবে ওপি প্রদর্শন করে যে তারা উদ্ধৃত করা / পলায়ন বুঝতে পারে না? এটি সমস্যাটি কীভাবে সমাধান করা যায় তার একটি উদাহরণ, কারণ ওপি জিজ্ঞাসা করেছিল যে কীভাবে জাভাস্ক্রিপ্টে পিএইচপি ডেটা পাবেন - আমার উদাহরণটি এমন একটি পদ্ধতি যা অন্য কোনও
উত্তরে

এই কোডের টুকরো দিয়ে $valযা পালাতে বা এনকোড করতে কিছুই করে না এবং যা কখনও কখনও কাজ করে এবং কখনও কখনও না:myPlugin.start(<?=$val?> // this works sometimes, but sometimes it fails
কোয়ান্টিন

3

কৌশলটি এখানে:

  1. সেই পরিবর্তনশীলটি ব্যবহার করতে এখানে আপনার 'পিএইচপি' রয়েছে :

    <?php
        $name = 'PHP variable';
        echo '<script>';
        echo 'var name = ' . json_encode($name) . ';';
        echo '</script>';
    ?>
  2. এখন আপনার কাছে একটি জাভাস্ক্রিপ্ট ভেরিয়েবল বলা আছে 'name'এবং সেই ভেরিয়েবলটি ব্যবহার করার জন্য আপনার জাভাস্ক্রিপ্ট কোডটি এখানে রয়েছে:

    <script>
         console.log("I am everywhere " + name);
    </script>

এটি পাওয়ার কোনও উপায় আছে যাতে এটি উত্স কোডটিতে আসলে মুদ্রণ না করে? আমার কাছে প্রচুর পরিমাণে অ্যারে রয়েছে যা আমি যাচ্ছি এবং এটি উত্সকে আটকে রাখে।
উইলিয়াম হাওলি

1
আপনি একটি উদাহরণ পরীক্ষা কেস প্রদান করতে পারেন?
রামিন তাগিজাদা

এই উত্তরে "3. সরাসরি জাভাস্ক্রিপ্টে ডেটা প্রতিধ্বনিত করুন" এর মতো নয় ? এটি আরও ভাল দেখায়।
কানজি

3

ধরা যাক আপনার পরিবর্তনশীল সর্বদা পূর্ণসংখ্যার হয়। সেক্ষেত্রে এটি সহজ:

<?PHP
    $number = 4;

    echo '<script>';
    echo 'var number = ' . $number . ';';
    echo 'alert(number);';
    echo '</script>';
?>

আউটপুট :

<script>var number = 4;alert(number);</script>

ধরা যাক আপনার পরিবর্তনশীল কোনও পূর্ণসংখ্যা নয়, তবে আপনি যদি উপরের পদ্ধতিটি ব্যবহার করে থাকেন তবে আপনি এই জাতীয় কিছু পাবেন:

<script>var number = abcd;alert(number);</script>

তবে জাভাস্ক্রিপ্টে এটি একটি সিনট্যাক্স ত্রুটি।

সুতরাং পিএইচপি-তে আমাদের একটি ফাংশন কল রয়েছে json_encodeযা একটি JSON অবজেক্টে স্ট্রিং এনকোড করে।

<?PHP
    $number = 'abcd';

    echo '<script>';
    echo 'var number = ' . json_encode($number) . ';';
    echo 'alert(number);';
    echo '</script>';
?>

যেহেতু abcdJSON এ রয়েছে তাই "abcd"এটি দেখতে এটির মতো দেখাচ্ছে:

<script>var number = "abcd";alert(number);</script>

আপনি অ্যারেগুলির জন্য একই পদ্ধতি ব্যবহার করতে পারেন:

<?PHP
    $details = [
    'name' => 'supun',
    'age' => 456,
    'weight' => '55'
    ];

    echo '<script>';
    echo 'var details = ' . json_encode($details) . ';';
    echo 'alert(details);';
    echo 'console.log(details);';
    echo '</script>';
?>

এবং আপনার জাভাস্ক্রিপ্ট কোডটি দেখতে এমন দেখাচ্ছে:

<script>var details = {"name":"supun","age":456,"weight":"55"};alert(details);console.log(details);</script>

কনসোল আউটপুট

এখানে চিত্র বিবরণ লিখুন


2

অনেক গবেষণার পরে, আমি খুঁজে পেলাম যে সহজ পদ্ধতিটি হ'ল সব ধরণের ভেরিয়েবলগুলি সহজেই পাস করা।

সার্ভার স্ক্রিপ্টে আপনার দুটি ভেরিয়েবল রয়েছে এবং আপনি সেগুলি ক্লায়েন্ট স্ক্রিপ্টগুলিতে প্রেরণের চেষ্টা করছেন:

$php_var1 ="Hello world";
$php_var2 ="Helloow";
echo '<script>';
echo 'var js_variable1= ' . json_encode($php_var1) . ';';
echo 'var js_variable2= ' . json_encode($php_var2) . ';';
echo '</script>';

পৃষ্ঠায় কল করা আপনার জাভাস্ক্রিপ্ট কোডের কোনওটিতে কেবল সেই ভেরিয়েবলগুলিকে কল করুন।


1

আমি ধরে নেব যে সংক্রমণ করার জন্য ডেটা একটি স্ট্রিং।

অন্যান্য মন্তব্যকারীরা যেমন বলেছে যে, এজ্যাক্স একটি সম্ভাব্য সমাধান, তবে এর বিপরীতে উপকারগুলি ছাড়িয়ে যায়: এর একটি বিলম্ব হয় এবং এটি প্রোগ্রাম করা আরও কঠিন (যখন সার্ভার- এবং ক্লায়েন্ট-দিক উভয়ই পুনরুদ্ধার করার জন্য কোড দরকার), যখন একটি সহজ পলায়ন ফাংশন যথেষ্ট হবে।

সুতরাং, আমরা পালাতে ফিরে এসেছি। json_encode($string)কাজ যদি আপনি হল UTF-8 প্রথম হিসাবে উৎস স্ট্রিং ক্ষেত্রে এটি ইতিমধ্যে নয় এনকোড, কারণ json_encodeহল UTF-8 ডেটার প্রয়োজন। যদি স্ট্রিংটি আইএসও -8859-1 হয় তবে আপনি কেবল ব্যবহার করতে পারবেন json_encode(utf8_encode($string)); অন্যথায় আপনি সর্বদা iconvরূপান্তরটি করতে সর্বদা ব্যবহার করতে পারেন।

তবে একটা বড় গ্যাচা আছে। আপনি যদি ইভেন্টগুলিতে এটি ব্যবহার করে থাকেন htmlspecialchars()তবে এটিকে সঠিক কোড তৈরি করতে আপনার ফলাফলটি চালানো দরকার । এবং তারপরে আপনাকে ইভেন্টটি সংযুক্ত করার জন্য ডাবল উদ্ধৃতিগুলি ব্যবহার করতে সতর্কতা অবলম্বন করতে হবে, বা সর্বদা ENT_QUOTEShtml স্পেশালচার্স যুক্ত করতে হবে। উদাহরণ স্বরূপ:

<?php
    $myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
    // Fails:
    //echo '<body onload="alert(', json_encode($myvar), ');">';
    // Fails:
    //echo "<body onload='alert(", json_encode($myvar), ");'>";
    // Fails:
    //echo "<body onload='alert(", htmlspecialchars(json_encode($myvar)), ");'>";

    // Works:
    //echo "<body onload='alert(", htmlspecialchars(json_encode($myvar), ENT_QUOTES), ");'>";
    // Works:
    echo '<body onload="alert(', htmlspecialchars(json_encode($myvar)), ');">';

    echo "</body>";

তবে আপনি htmlspecialcharsনিয়মিত জাভাস্ক্রিপ্ট কোড ব্যবহার করতে পারবেন না (কোডটি ট্যাগযুক্ত <script>... </script>ট্যাগ)। যা htmlspecialcharsইভেন্ট কোডটি লেখার সময় ফলাফলটি ভুলে গিয়ে ভুলগুলির ঝুঁকির সাথে এই ফাংশনটি ব্যবহার করে ।

এমন কোনও ফাংশন লেখা সম্ভব যা সমস্যায় পড়ে না এবং আপনি ইভেন্টগুলিতে এবং নিয়মিত জাভাস্ক্রিপ্ট কোড উভয়ই ব্যবহার করতে পারবেন যতক্ষণ না আপনি আপনার ইভেন্টগুলি সর্বদা একক উদ্ধৃতিতে বা সর্বদা ডাবল উদ্ধৃতিতে আবদ্ধ করেন। এখানে আমার প্রস্তাবটি হ'ল তাদের ডাবল কোটে থাকা প্রয়োজন (যা আমি পছন্দ করি):

<?php
    // Optionally pass the encoding of the source string, if not UTF-8
    function escapeJSString($string, $encoding = 'UTF-8')
    {
        if ($encoding != 'UTF-8')
            $string = iconv($encoding, 'UTF-8', $string);
        $flags = JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_UNESCAPED_SLASHES;
        $string = substr(json_encode($string, $flags), 1, -1);
        return "'$string'";
    }

ফাংশনের জন্য পিএইচপি 5.4+ প্রয়োজন। ব্যবহারের উদাহরণ:

<?php
    $myvar = "I'm in \"UTF-8\" encoding and I have <script>script tags</script> & ampersand!";
    // Note use of double quotes to enclose the event definition!
    echo '<body onload="alert(', escapeJSString($myvar), ');">';
    // Example with regular code:
    echo '<script>alert(', escapeJSString($myvar), ');</script>';
    echo '</body>';

0

আপনার কোড অনুসারে

<$php
     $val = $myService->getValue(); // Makes an API and database call
     echo '<span id="value">'.$val.'</span>';
$>

এখন আপনি ডিওএম ব্যবহার করে মান পেতে পারেন, স্প্যান আইডিটির অভ্যন্তরীণ এইচটিএমএল ব্যবহার করতে পারেন, এক্ষেত্রে আপনাকে সার্ভারে কোনও কল করতে হবে না, বা অ্যাজাক্স বা অন্য কোনও জিনিস।

আপনার পৃষ্ঠাটি পিএইচপি ব্যবহার করে এটি মুদ্রণ করবে এবং আপনি জাভাস্ক্রিপ্ট DOM ব্যবহার করে মান পাবেন।


এই কোডটি এক্সএসএসের পক্ষে ঝুঁকিপূর্ণ, কারণ এটি <এবং এর মতো অক্ষরগুলি এড়িয়ে যায় না >। এছাড়াও, ইতিমধ্যে অনুরূপ সমাধানের পরামর্শ দেওয়া হয়েছে।
মিশা পেরেকোস্কি

0
<?php

    $val = $myService->getValue(); // Makes an API and database call

    echo "
        <script>
            myPlugin.start({$val});
        </script> ";

?>

0

পিএইচপি

$fruits = array("apple" => "yellow", "strawberry" => "red", "kiwi" => "green");
<script>
    var color = <?php echo json_encode($fruits) ?>;
</script>
<script src="../yourexternal.js"></script>

জেএস (yourextern.js)

alert("The apple color is" + color['apple'] + ", the strawberry color is " + color['strawberry'] + " and the kiwi color is " + color['kiwi'] + ".");

আউটপুট

আপেলের রঙ হলুদ, স্ট্রবেরি রঙ লাল এবং কিউই রঙ সবুজ।


-2

যাদের নীচে কোড ব্যবহার করতে কিছু সমস্যা হয় এবং এটি প্রদর্শিত <?php echo $username?>বা এটির মতো কিছু রাখে তাদের জন্য এই 'অ্যাডটাইপ অ্যাপ্লিকেশন / x-httpd-php .html .htm' যুক্ত করে মাইম_মডিউল বিভাগে httpd.conf সম্পাদনা করুন কারণ এটি অক্ষম হতে পারে গতানুগতিক.

<?php
    $username = 1;
?>

<script type="text/javascript">
    var myData = <?php echo $username ?>;
    console.log(myData);
    alert(myData);
</script>

@ মাডারাউচি আপনি কেন ব্যাখ্যা করতে পারবেন?
নিকিতা 웃

3
কারণ যদি $username === "hello", তবে আপনার var myData = hello;যা ভয়াবহভাবে ভেঙে যাবে।
মাদারার ঘোস্ট

-2

ব্যবহার করুন:

<?php
    $your_php_variable= 22;
    echo "<script type='text/javascript'>var your_javascript_variable = $your_php_variable;</script>";
?>

এবং এটি কাজ করবে। এটি কেবল একটি জাভাস্ক্রিপ্ট ভেরিয়েবল বরাদ্দ করছে এবং তারপরে একটি বিদ্যমান পিএইচপি ভেরিয়েবলের মান পাস করছে। যেহেতু পিএইচপি এখানে জাভাস্ক্রিপ্ট লাইনগুলি লিখেছে, এর পিএইচপি ভেরিয়েবলের মান রয়েছে এবং এটি সরাসরি পাস করতে পারে।

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