JavaScript를 사용하여 게시 요청 매개 변수를 읽는 방법

내 HTML에서 게시 요청 매개 변수를 읽으려고합니다. JavaScript에서 다음 코드를 사용하여 get 요청 매개 변수를 읽을 수 있습니다.

$wnd.location.search

그러나 포스트 요청에는 작동하지 않습니다. 누구든지 JavaScript를 사용하여 HTML에서 게시 요청 매개 변수 값을 읽는 방법을 알려줄 수 있습니까?

POST 데이터는 서버 측에서 처리되는 데이터입니다 . 그리고 Javascript는 클라이언트 측에 있습니다. 따라서 JavaScript를 사용하여 게시물 데이터를 읽을 수있는 방법이 없습니다.

서버가 JavaScript 변수를 채우도록하는 PHP의 작은 부분은 빠르고 쉽습니다.

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

그런 다음 일반적인 방법으로 JavaScript 변수에 액세스하십시오.

선택하지 않는 한 특정 데이터 또는 데이터 종류가 게시된다는 보장은 없습니다. 모든 입력 필드는 제안이 아니라 보장이 아닙니다.

JavaScript는 클라이언트 측 스크립팅 언어로, 모든 코드가 웹 사용자의 컴퓨터에서 실행됩니다. 반면에 POST 변수는 서버로 이동하여 거기에 상주합니다. 브라우저는 이러한 변수를 JavaScript 환경에 제공하지 않으며 개발자는 이러한 변수가 마술처럼 거기에있을 것이라고 기 대해서는 안됩니다.

브라우저는 JavaScript가 POST 데이터에 액세스하는 것을 허용하지 않기 때문에 PHP와 같은 외부 행위자가 POST 값을 스크립트 변수 또는 전송중인 POST 값을 캡처하는 확장 / addon으로 에코하지 않고 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는 브라우저가 클라이언트 (브라우저)에서 웹 서버로 보내는 것입니다. 게시 데이터는 http 헤더를 통해 서버로 전송되며 서버 끝 또는 클라이언트 (브라우저)에서 웹 서버로의 경로 (예 : 프록시 서버) 사이에서만 사용할 수 있습니다. 따라서 JavaScript와 같은 클라이언트 측 스크립트에서 처리 할 수 ​​없습니다. CGI, PHP, Java 등과 같은 서버 측 스크립트를 통해 처리해야합니다. 여전히 JavaScript로 작성해야하는 경우 Node.js와 같은 서버에서 JavaScript를 이해하고 실행하는 웹 서버가 있어야합니다.

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

이는 단지 예시이며, 사용하지 않아야 어떤 암호 등 POST 메소드가 존재 이유와 같은 민감한 데이터; 백엔드로 안전하게 데이터를 보내면 목적이 무산됩니다.

그러나 /page?blah=value&bleh=value&blahbleh=valueURL 없이 다음 페이지로 이동하기 위해 민감하지 않은 양식 데이터가 필요한 경우 더 깔끔한 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();

따라서 index.php ( <script type="text/javascript" src="./main.js"></script>)에 main.js를 포함 하면 게시물 데이터가 포함 된 숨겨진 입력 값을 얻을 수 있습니다.

먼저 PHP를 통해 게시물 변수를 인코딩하기 위해 'json_encode'를 사용할 수 있습니다. 그런 다음 JSON 인코딩 된 포스트 변수에서 JS 객체 (배열)를 생성합니다. 그런 다음 JavaScript 루프를 사용하여 해당 변수를 조작합니다. 다음과 같이-아래 예제에서-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에서 쿠키를 설정하는 것입니다.

예 : 1 일 후 만료 값이있는 유효하지 않은 이름의 쿠키 $invalid:

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

그런 다음 JS에서 다시 읽습니다 ( JS 쿠키 플러그인 사용).

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

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

이제 invalidJavaScript 의 변수에서 값에 액세스 할 수 있습니다 .

JavaScript로 정의한 내용에 따라 다릅니다. 요즘 우리는 실제로 NodeJS와 같은 서버 측 프로그램에 JS가 있습니다. 서버 언어를 제외하고는 브라우저에서 코딩하는 것과 정확히 동일한 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 : POST 사이트 B를 사용하여 외부 URL (사이트 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>를 사용하여 post 메소드에서 매개 변수를 가져 오고 js 파일이 js 파일 <head>에서 직접 'xxx'와 같은 매개 변수를 처리 할 수 ​​있도록 뒤에 포함되어 있는지 확인하십시오 .