Cách đọc các thông số yêu cầu bài đăng bằng JavaScript

Tôi đang cố đọc các tham số yêu cầu bài đăng từ HTML của mình. Tôi có thể đọc các tham số nhận yêu cầu bằng cách sử dụng mã sau trong JavaScript.

$wnd.location.search

Nhưng nó không hoạt động cho yêu cầu đăng. Có ai có thể cho tôi biết cách đọc các giá trị tham số yêu cầu bài đăng trong HTML của tôi bằng JavaScript không?

Dữ liệu POST là dữ liệu được xử lý phía máy chủ . Và Javascript ở phía máy khách. Vì vậy, không có cách nào bạn có thể đọc dữ liệu bài đăng bằng JavaScript.

Một đoạn PHP nhỏ để máy chủ điền biến JavaScript thật nhanh chóng và dễ dàng:

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

Sau đó, chỉ cần truy cập biến JavaScript theo cách bình thường.

Lưu ý rằng không có gì đảm bảo rằng bất kỳ dữ liệu hoặc loại dữ liệu nhất định nào sẽ được đăng trừ khi bạn kiểm tra - tất cả các trường đầu vào là gợi ý, không phải đảm bảo.

JavaScript là một ngôn ngữ kịch bản phía máy khách, có nghĩa là tất cả mã được thực thi trên máy của người dùng web. Mặt khác, các biến POST đi đến máy chủ và nằm ở đó. Các trình duyệt không cung cấp các biến đó cho môi trường JavaScript, và bất kỳ nhà phát triển nào cũng không nên mong đợi chúng ở đó một cách kỳ diệu.

Vì trình duyệt không cho phép JavaScript truy cập vào dữ liệu POST, nên hầu như không thể đọc các biến POST mà không có tác nhân bên ngoài như PHP lặp lại các giá trị POST vào một biến script hoặc một tiện ích mở rộng / addon nắm bắt các giá trị POST đang chuyển tiếp. Các biến GET có sẵn thông qua một giải pháp thay thế vì chúng nằm trong URL mà máy khách có thể phân tích cú pháp.

Sử dụng sessionStorage!

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

Tại trang another-page.html:

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

Liên kết tham khảo - https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Tại sao không sử dụng localStorage hoặc bất kỳ cách nào khác để đặt giá trị mà bạn muốn chuyển?

Bằng cách đó, bạn có thể truy cập vào nó từ mọi nơi!

Bằng bất cứ nơi nào tôi muốn nói trong miền / bối cảnh nhất định

Bạn có thể đọc tham số yêu cầu bài đăng bằng jQuery-PostCapture ( @ ssut / jQuery-PostCapture ).

Plugin PostCapture bao gồm một số thủ thuật.

Khi bạn nhấp vào nút gửi, onsubmitsự kiện sẽ được gửi đi.

Tại thời điểm đó, PostCapture sẽ tuần tự hóa dữ liệu biểu mẫu và lưu vào html5 localStorage (nếu có) hoặc lưu trữ cookie.

POST là những gì trình duyệt gửi từ máy khách (máy chủ của bạn) đến máy chủ web. Dữ liệu bài đăng được gửi đến máy chủ thông qua tiêu đề http và nó chỉ có sẵn ở cuối máy chủ hoặc ở giữa đường dẫn (ví dụ: máy chủ proxy) từ máy khách (trình duyệt của bạn) đến máy chủ web. Vì vậy, nó không thể được xử lý từ các tập lệnh phía máy khách như JavaScript. Bạn cần xử lý nó thông qua các tập lệnh phía máy chủ như CGI, PHP, Java, v.v. Nếu bạn vẫn cần viết bằng JavaScript, bạn cần có một máy chủ web hiểu và thực thi JavaScript trong máy chủ của bạn như Node.js

Nếu bạn đang làm việc với API Java / REST, một giải pháp dễ dàng. Trong trang JSP, bạn có thể làm như sau:

    <%
    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>

Hoặc sử dụng nó để đưa chúng vào từ điển mà một hàm có thể truy xuất:

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

Sau đó, trong 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;
}

Đây chỉ là một ví dụ và không nên được sử dụng cho bất kỳ dữ liệu nhạy cảm nào như mật khẩu, v.v. Phương thức POST tồn tại là có lý do; để gửi dữ liệu một cách an toàn đến phần phụ trợ, vì vậy điều đó sẽ không đạt được mục đích.

Nhưng nếu bạn chỉ cần một loạt dữ liệu biểu mẫu không nhạy cảm để chuyển đến trang tiếp theo mà không có /page?blah=value&bleh=value&blahbleh=valuetrong url của bạn, điều này sẽ tạo ra một url rõ ràng hơn và JavaScript của bạn có thể tương tác ngay với dữ liệu POST của bạn.

Tôi có một mã đơn giản để tạo nó:

Trong index.php của bạn:

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

Trong main.js của bạn:

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

Vì vậy, khi bạn đưa main.js vào index.php ( <script type="text/javascript" src="./main.js"></script>), bạn có thể nhận được giá trị của đầu vào ẩn chứa dữ liệu bài đăng của bạn.

Bạn có thể 'json_encode' để mã hóa các biến bài đăng của mình trước tiên qua PHP. Sau đó, tạo một đối tượng JS (mảng) từ các biến bài đăng được mã hóa JSON. Sau đó, sử dụng một vòng lặp JavaScript để thao tác các biến đó ... Giống như - trong ví dụ này bên dưới - để điền một biểu mẫu biểu mẫu 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>

Một tùy chọn là đặt cookie trong PHP.

Ví dụ: một cookie có tên không hợp lệ với giá trị $invalidsẽ hết hạn sau 1 ngày:

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

Sau đó đọc lại nó trong JS (sử dụng plugin JS Cookie ):

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

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

Bây giờ bạn có thể truy cập giá trị từ invalidbiến trong JavaScript.

Nó phụ thuộc vào những gì bạn định nghĩa là JavaScript. Ngày nay chúng ta thực sự có JS tại các chương trình phía máy chủ như NodeJS. Nó hoàn toàn giống với JavaScript mà bạn viết mã trong trình duyệt của mình, giống như một ngôn ngữ máy chủ. Vì vậy, bạn có thể làm điều gì đó như sau: ( Mã của 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.
        });
    }
}

Và từ đó sử dụng post['key'] = newVal;vv ...

Các biến POST chỉ có sẵn cho trình duyệt nếu chính trình duyệt đó đã gửi chúng ngay từ đầu. Nếu một biểu mẫu trang web khác gửi qua POST đến một URL khác, trình duyệt sẽ không thấy dữ liệu POST được đưa vào.

SITE A: có biểu mẫu gửi đến URL bên ngoài (trang B) bằng cách sử dụng POST SITE B: sẽ nhận được khách truy cập nhưng chỉ với các biến 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();
    }
});

Trong jQuery, đoạn mã trên sẽ cung cấp cho bạn chuỗi URL với các tham số POST trong URL. Không thể trích xuất các tham số POST.

Để sử dụng jQuery , bạn cần bao gồm thư viện jQuery. Sử dụng những điều sau đây cho việc đó:

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

Chúng tôi có thể thu thập các thông số biểu mẫu được gửi bằng POST với việc sử dụng khái niệm serialize .

Thử đi:

$('form').serialize(); 

Chỉ cần kèm theo cảnh báo, nó sẽ hiển thị tất cả các thông số bao gồm cả ẩn.

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

Sử dụng biểu thức EL $ {param.xxx} in <head>để lấy tham số từ một phương thức đăng và đảm bảo tệp js được bao gồm sau <head>đó để bạn có thể xử lý trực tiếp một tham số như 'xxx' trong tệp js của mình.