วิธีอ่านพารามิเตอร์คำขอโพสต์โดยใช้ JavaScript

ฉันพยายามอ่านพารามิเตอร์คำขอโพสต์จาก HTML ของฉัน ฉันสามารถอ่านพารามิเตอร์ get request โดยใช้โค้ดต่อไปนี้ใน JavaScript

$wnd.location.search

แต่ใช้ไม่ได้กับคำขอโพสต์ ใครช่วยบอกวิธีอ่านค่าพารามิเตอร์คำขอโพสต์ใน HTML โดยใช้ JavaScript ได้ไหม

โพสต์ข้อมูลที่เป็นข้อมูลที่มีการจัดการด้านเซิร์ฟเวอร์ และ Javascript อยู่ในฝั่งไคลเอ็นต์ ดังนั้นจึงไม่มีวิธีใดที่คุณจะอ่านข้อมูลโพสต์โดยใช้ JavaScript ได้

PHP เพียงเล็กน้อยเพื่อให้เซิร์ฟเวอร์เติมตัวแปร JavaScript นั้นง่ายและรวดเร็ว:

var my_javascript_variable = <?php echo json_encode($_POST['my_post'] ?? null) ?>;

จากนั้นเพียงแค่เข้าถึงตัวแปร JavaScript ด้วยวิธีปกติ

โปรดทราบว่าไม่มีการรับประกันว่าจะมีการโพสต์ข้อมูลหรือประเภทข้อมูลใด ๆ เว้นแต่คุณจะตรวจสอบช่องป้อนข้อมูลทั้งหมดเป็นคำแนะนำไม่ใช่การรับประกัน

JavaScript เป็นภาษาสคริปต์ฝั่งไคลเอ็นต์ซึ่งหมายความว่าโค้ดทั้งหมดจะถูกเรียกใช้บนเครื่องของผู้ใช้เว็บ ในทางกลับกันตัวแปร POST ไปที่เซิร์ฟเวอร์และอยู่ที่นั่น เบราว์เซอร์ไม่ได้ให้ตัวแปรเหล่านั้นในสภาพแวดล้อม JavaScript และนักพัฒนาไม่ควรคาดหวังให้ตัวแปรเหล่านั้นอยู่ที่นั่นอย่างน่าอัศจรรย์

เนื่องจากเบราว์เซอร์ไม่อนุญาตให้ JavaScript เข้าถึงข้อมูล POST จึงเป็นไปไม่ได้เลยที่จะอ่านตัวแปร POST โดยไม่มีตัวแสดงภายนอกเช่น PHP สะท้อนค่า POST ลงในตัวแปรสคริปต์หรือส่วนขยาย / ส่วนเสริมที่รวบรวมค่า POST ระหว่างการขนส่ง ตัวแปร GET พร้อมใช้งานผ่านวิธีแก้ปัญหาเนื่องจากอยู่ใน URL ที่เครื่องไคลเอ็นต์สามารถแยกวิเคราะห์ได้

ใช้ sessionStorage!

$(function(){
    $('form').submit{
       document.sessionStorage["form-data"] =  $('this').serialize();
       document.location.href = 'another-page.html';
    }
});

ที่ another-page.html:

var formData = document.sessionStorage["form-data"];

ลิงค์อ้างอิง - https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

ทำไมไม่ใช้ localStorage หรือวิธีอื่นใดในการตั้งค่าที่คุณต้องการส่งผ่าน

ด้วยวิธีนี้คุณสามารถเข้าถึงได้จากทุกที่!

โดยทุกที่ที่ผมหมายถึงภายในกำหนดโดเมน / บริบท

คุณสามารถอ่านพารามิเตอร์คำขอโพสต์ด้วย jQuery-PostCapture ( @ ssut / jQuery-PostCapture )

ปลั๊กอิน PostCapture ประกอบด้วยเทคนิคบางอย่าง

เมื่อคุณคลิกปุ่มส่งonsubmitกิจกรรมจะถูกส่งไป

ในขณะนั้น PostCapture จะถูกทำให้เป็นอนุกรมข้อมูลในรูปแบบและบันทึกลงใน html5 localStorage (ถ้ามี) หรือที่เก็บคุกกี้

POST คือสิ่งที่เบราว์เซอร์ส่งจากไคลเอนต์ (broswer ของคุณ) ไปยังเว็บเซิร์ฟเวอร์ ข้อมูลโพสต์จะถูกส่งไปยังเซิร์ฟเวอร์ผ่านส่วนหัว http และสามารถใช้ได้เฉพาะที่ปลายเซิร์ฟเวอร์หรือระหว่างเส้นทาง (ตัวอย่าง: พร็อกซีเซิร์ฟเวอร์) จากไคลเอนต์ (เบราว์เซอร์ของคุณ) ไปยังเว็บเซิร์ฟเวอร์ ดังนั้นจึงไม่สามารถจัดการจากสคริปต์ฝั่งไคลเอ็นต์เช่น JavaScript คุณต้องจัดการผ่านสคริปต์ฝั่งเซิร์ฟเวอร์เช่น CGI, PHP, Java เป็นต้นหากคุณยังต้องเขียน JavaScript คุณต้องมีเว็บเซิร์ฟเวอร์ที่เข้าใจและเรียกใช้งาน JavaScript ในเซิร์ฟเวอร์ของคุณเช่น Node.js

หากคุณกำลังทำงานกับ Java / REST API วิธีแก้ปัญหาก็ทำได้ง่าย ในเพจ JSP คุณสามารถทำสิ่งต่อไปนี้:

    <%
    String action = request.getParameter("action");
    String postData = request.getParameter("dataInput");
    %>
    <script>
        var doAction = "<% out.print(action); %>";
        var postData = "<% out.print(postData); %>";
        window.alert(doAction + " " + postData);
    </script>

<script>
<?php
if($_POST) { // Check to make sure params have been sent via POST
  foreach($_POST as $field => $value) { // Go through each POST param and output as JavaScript variable
    $val = json_encode($value); // Escape value
    $vars .= "var $field = $val;\n";
  }
  echo "<script>\n$vars</script>\n";
}
?>
</script>

หรือใช้เพื่อวางไว้ในพจนานุกรมที่ฟังก์ชันสามารถดึงข้อมูลได้:

<script>
<?php
if($_POST) {
  $vars = array();
  foreach($_POST as $field => $value) {
    array_push($vars,"$field:".json_encode($value)); // Push to $vars array so we can just implode() it, escape value
  }
  echo "<script>var post = {".implode(", ",$vars)."}</script>\n"; // Implode array, javascript will interpret as dictionary
}
?>
</script>

จากนั้นใน JavaScript:

var myText = post['text'];

// Or use a function instead if you want to do stuff to it first
function Post(variable) {
  // do stuff to variable before returning...
  var thisVar = post[variable];
  return thisVar;
}

นี่เป็นเพียงตัวอย่างและไม่ควรใช้สำหรับการใด ๆข้อมูลที่สำคัญเช่นรหัสผ่าน ฯลฯ วิธีการโพสต์ที่มีอยู่สำหรับเหตุผล; ในการส่งข้อมูลอย่างปลอดภัยไปยังแบ็กเอนด์เพื่อที่จะเอาชนะวัตถุประสงค์

แต่ถ้าคุณต้องการข้อมูลในรูปแบบที่ไม่ละเอียดอ่อนจำนวนมากเพื่อไปที่หน้าถัดไปโดยไม่ต้อง/page?blah=value&bleh=value&blahbleh=valueอยู่ใน URL ของคุณสิ่งนี้จะทำให้ URL สะอาดขึ้นและ JavaScript ของคุณสามารถโต้ตอบกับข้อมูล POST ของคุณได้ทันที

ฉันมีรหัสง่ายๆที่จะทำให้มัน:

ใน index.php ของคุณ:

<input id="first_post_data" type="hidden" value="<?= $_POST['first_param']; ?>"/>

ใน main.js ของคุณ:

let my_first_post_param = $("#first_post_data").val();

ดังนั้นเมื่อคุณรวม main.js ใน index.php ( <script type="text/javascript" src="./main.js"></script>) คุณจะได้รับค่าของอินพุตที่ซ่อนอยู่ซึ่งมีข้อมูลโพสต์ของคุณ

คุณสามารถ 'json_encode' เพื่อเข้ารหัสตัวแปรโพสต์ของคุณก่อนผ่าน PHP จากนั้นสร้างออบเจ็กต์ JS (อาร์เรย์) จากตัวแปรโพสต์ที่เข้ารหัส JSON จากนั้นใช้ JavaScript loop เพื่อจัดการตัวแปรเหล่านั้น ... เช่น - ในตัวอย่างด้านล่างนี้ - เพื่อเติมข้อมูลในรูปแบบฟอร์ม HTML:

<script>

    <?php $post_vars_json_encode =  json_encode($this->input->post()); ?>

    // SET POST VALUES OBJECT/ARRAY
    var post_value_Arr = <?php echo $post_vars_json_encode; ?>;// creates a JS object with your post variables
    console.log(post_value_Arr);

    // POPULATE FIELDS BASED ON POST VALUES
    for(var key in post_value_Arr){// Loop post variables array

        if(document.getElementById(key)){// Field Exists
            console.log("found post_value_Arr key form field = "+key);
            document.getElementById(key).value = post_value_Arr[key];
        }
    }


</script>

ทางเลือกหนึ่งคือการตั้งค่าคุกกี้ใน PHP

ตัวอย่างเช่นคุกกี้ชื่อไม่ถูกต้องพร้อมค่า$invalidหมดอายุใน 1 วัน:

setcookie('invalid', $invalid, time() + 60 * 60 * 24);

จากนั้นอ่านกลับใน JS (โดยใช้ปลั๊กอินJS Cookie ):

var invalid = Cookies.get('invalid');

if(invalid !== undefined) {
    Cookies.remove('invalid');
}

ตอนนี้คุณสามารถเข้าถึงค่าจากinvalidตัวแปรใน JavaScript

ขึ้นอยู่กับสิ่งที่คุณกำหนดเป็น JavaScript ปัจจุบันเรามี JS ที่โปรแกรมฝั่งเซิร์ฟเวอร์เช่น NodeJS เป็น JavaScript แบบเดียวกับที่คุณเขียนโค้ดในเบราว์เซอร์ของคุณอย่างมากและเป็นภาษาเซิร์ฟเวอร์ คุณสามารถทำสิ่งนี้ได้: ( รหัสโดย Casey Chu: https://stackoverflow.com/a/4310087/5698805 )

var qs = require('querystring');

function (request, response) {
    if (request.method == 'POST') {
        var body = '';

        request.on('data', function (data) {
            body += data;

            // Too much POST data, kill the connection!
            // 1e6 === 1 * Math.pow(10, 6) === 1 * 1000000 ~~~ 1MB
            if (body.length > 1e6)
                request.connection.destroy();
        });

        request.on('end', function () {
            var post = qs.parse(body);
            // use post['blah'], etc.
        });
    }
}

และจากการใช้งานpost['key'] = newVal;เป็นต้น ...

ตัวแปร POST จะใช้ได้เฉพาะกับเบราว์เซอร์หากเบราว์เซอร์เดียวกันนั้นส่งมาตั้งแต่แรก หากแบบฟอร์มเว็บไซต์อื่นส่งผ่าน POST ไปยัง URL อื่นเบราว์เซอร์จะไม่เห็นข้อมูล POST เข้ามา

ไซต์ A: มีแบบฟอร์มที่ส่งไปยัง URL ภายนอก (ไซต์ B) โดยใช้ POST SITE B: จะรับผู้เยี่ยมชม แต่มีเพียงตัวแปร GET

function getParameterByName(name, url) {
            if (!url) url = window.location.href;
            name = name.replace(/[\[\]]/g, "\\$&");
            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
                results = regex.exec(url);
            if (!results) return null;
            if (!results[2]) return '';
            return decodeURIComponent(results[2].replace(/\+/g, " "));
        }
var formObj = document.getElementById("pageID");
formObj.response_order_id.value = getParameterByName("name");

$(function(){
    $('form').sumbit{
        $('this').serialize();
    }
});

ใน jQuery โค้ดด้านบนจะให้สตริง URL ที่มีพารามิเตอร์ POST ใน URL ไม่เป็นไปไม่ได้ที่จะแยกพารามิเตอร์ POST

ในการใช้jQueryคุณต้องรวมไลบรารี jQuery ใช้สิ่งต่อไปนี้สำหรับสิ่งนั้น:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

เราสามารถรวบรวมรูปแบบฟอร์มที่ส่งโดยใช้ POST โดยใช้แนวคิดแบบอนุกรม

ลองสิ่งนี้:

$('form').serialize(); 

เพียงแค่ใส่การแจ้งเตือนก็จะแสดงพารามิเตอร์ทั้งหมดรวมทั้งซ่อนอยู่

<head><script>var xxx = ${params.xxx}</script></head>

ใช้นิพจน์ EL $ {param.xxx} ใน<head>การรับพารามิเตอร์จากวิธีการโพสต์และตรวจสอบให้แน่ใจว่าได้รวมไฟล์ js ไว้หลังจาก<head>นั้นเพื่อให้คุณสามารถจัดการพารามิเตอร์เช่น 'xxx' ในไฟล์ js ได้โดยตรง