ส่งผ่านข้อมูลด้วย window.location.href

เมื่อใช้ window.location.href ฉันต้องการส่งข้อมูล POST ไปยังเพจใหม่ที่ฉันเปิด เป็นไปได้ไหมโดยใช้ JavaScript และ jQuery

การใช้window.location.hrefไม่สามารถส่งคำขอ POST ได้

สิ่งที่คุณต้องทำคือตั้งค่าformแท็กที่มีช่องข้อมูลตั้งค่าactionแอตทริบิวต์ของฟอร์มเป็น URL และmethodแอตทริบิวต์เป็น POST จากนั้นเรียกใช้submitเมธอดบนformแท็ก

เพิ่มแบบฟอร์มลงใน HTML ของคุณดังนี้:

<form style="display: none" action="/the/url" method="POST" id="form">
  <input type="hidden" id="var1" name="var1" value=""/>
  <input type="hidden" id="var2" name="var2" value=""/>
</form>

และใช้ JQuery เพื่อเติมเต็มค่าเหล่านี้ (แน่นอนคุณสามารถใช้ javascript เพื่อทำสิ่งที่คล้ายกันได้)

$("#var1").val(value1);
$("#var2").val(value2);

จากนั้นส่งแบบฟอร์มในที่สุด

$("#form").submit();

ทางฝั่งเซิร์ฟเวอร์คุณควรจะได้รับข้อมูลที่คุณส่งโดยการตรวจสอบvar1และvar2วิธีการทำจะขึ้นอยู่กับภาษาฝั่งเซิร์ฟเวอร์ที่คุณใช้

ใช้ไฟล์นี้: "jquery.redirect.js"

$("#btn_id").click(function(){
    $.redirect(http://localhost/test/test1.php,
        {
            user_name: "khan",
            city : "Meerut",
            country : "country"
        });
    });
});

ดูhttps://github.com/mgalante/jquery.redirect

ตามที่ได้กล่าวไว้ในคำตอบอื่น ๆ ไม่มีวิธีใดในการส่งคำขอ POST โดยใช้ window.location.href คุณสามารถสร้างแบบฟอร์มและส่งได้ทันที

คุณสามารถใช้ฟังก์ชันนี้:

function postForm(path, params, method) {
    method = method || 'post';

    var form = document.createElement('form');
    form.setAttribute('method', method);
    form.setAttribute('action', path);

    for (var key in params) {
        if (params.hasOwnProperty(key)) {
            var hiddenField = document.createElement('input');
            hiddenField.setAttribute('type', 'hidden');
            hiddenField.setAttribute('name', key);
            hiddenField.setAttribute('value', params[key]);

            form.appendChild(hiddenField);
        }
    }

    document.body.appendChild(form);
    form.submit();
}

postForm('mysite.com/form', {arg1: 'value1', arg2: 'value2'});

https://stackoverflow.com/a/133997/2965158

คำตอบสั้น ๆ : ไม่ window.location.hrefไม่สามารถส่งผ่านข้อมูล POST ได้

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

var submitMe = document.createElement("form");
submitMe.action = "YOUR_URL_HERE"; // Remember to change me
submitMe.method = "post";
submitMe.enctype = "multipart/form-data";
var nameJoiner = "_";
// ^ The string used to join form name and input name
//   so that you can differentiate between forms when
//   processing the data server-side.
submitMe.importFields = function(form){
    for(k in form.elements){
        if(input = form.elements[k]){
            if(input.type!="submit"&&
                     (input.nodeName=="INPUT"
                    ||input.nodeName=="TEXTAREA"
                    ||input.nodeName=="BUTTON"
                    ||input.nodeName=="SELECT")
                     ){
                var output = input.cloneNode(true);
                output.name = form.name + nameJoiner + input.name;
                this.appendChild(output);
            }
        }
    }
}

• ทำsubmitMe.importFields(form_element);สำหรับแต่ละแบบฟอร์มทั้งสามแบบที่คุณต้องการส่ง
• ฟังก์ชั่นนี้จะเพิ่มชื่อของแต่ละรูปแบบชื่อของปัจจัยการผลิตของเด็ก (ถ้าคุณมี<input name="email">ในชื่อที่ส่งจะเป็น <form name="login">login_name
• คุณสามารถเปลี่ยนnameJoinerตัวแปรเป็นอย่างอื่นได้_เพื่อไม่ให้ขัดแย้งกับรูปแบบการตั้งชื่ออินพุตของคุณ
• เมื่อคุณนำเข้าแบบฟอร์มที่จำเป็นทั้งหมดแล้วให้ทำ submitMe.submit();

ง่ายๆเพียงเท่านี้

$.post({url: "som_page.php", 
    data: { data1: value1, data2: value2 }
    ).done(function( data ) { 
        $( "body" ).html(data);
    });
});

ฉันต้องแก้ปัญหานี้เพื่อทำการล็อกหน้าจอของแอปพลิเคชันของฉันซึ่งฉันต้องส่งผ่านข้อมูลที่ละเอียดอ่อนในฐานะผู้ใช้และ URL ที่เขาทำงานอยู่ จากนั้นสร้างฟังก์ชันที่รันโค้ดนี้

คุณพิจารณาเพียงแค่ใช้ Local / Session Storage หรือไม่? - หรือ - ขึ้นอยู่กับความซับซ้อนของสิ่งที่คุณกำลังสร้าง คุณสามารถใช้ indexDB

หมายเหตุ :

Local storageและindexDBไม่ปลอดภัย - ดังนั้นคุณจึงต้องการหลีกเลี่ยงการจัดเก็บข้อมูลที่ละเอียดอ่อน / ข้อมูลส่วนบุคคล (เช่นชื่อที่อยู่อีเมล DOB ฯลฯ ) ในอย่างใดอย่างหนึ่ง

Session Storage เป็นตัวเลือกที่ปลอดภัยกว่าสำหรับสิ่งที่ละเอียดอ่อนเข้าถึงได้เฉพาะต้นทางที่ตั้งค่ารายการและล้างทันทีที่ปิดเบราว์เซอร์ / แท็บ

IndexDBมีความซับซ้อนมากขึ้น [แต่ไม่มาก] และมีอยู่30MB noSQL databaseในทุกเบราว์เซอร์ (แต่โดยพื้นฐานแล้วสามารถใช้ได้ไม่ จำกัด หากผู้ใช้เลือก) -> ครั้งต่อไปที่คุณใช้ Google เอกสารให้เปิด DevTools -> แอปพลิเคชัน -> IndexDB และขึ้นสู่จุดสูงสุด [การแจ้งเตือนสปอยเลอร์: มีการเข้ารหัส]

เน้นLocalและSession Storage; สิ่งเหล่านี้ใช้งานง่ายทั้งคู่:

// To Set 
sessionStorage.setItem( 'key' , 'value' );

// e.g.
sessionStorage.setItem( 'formData' , { name: "Mr Manager", company: "Bluth's Frozen Bananas", ...  } );    

// Get The Data 
const fromData = sessionStorage.getItem( 'key' );     

// e.g. (after navigating to next location)
const fromData = sessionStorage.getItem( 'formData' );

// Remove 
sessionStorage.removeItem( 'key' );

// Remove _all_ saved data sessionStorage
sessionStorage.clear( ); 

หากความเรียบง่ายไม่ใช่สิ่งที่คุณต้องการหรือ - บางทีคุณอาจต้องการออกนอกเส้นทางและลองใช้แนวทางอื่นร่วมกัน -> คุณอาจใช้shared web worker... คุณรู้เพียงเพื่อเตะ

คุณสามารถใช้ GET แทน pass แต่อย่าใช้วิธีนี้สำหรับค่าที่สำคัญ

function passIDto(IDval){    
window.location.href = "CustomerBasket.php?oridd=" +  IDval ;
}   

ใน CustomerBasket.php

<?php
  $value = $_GET["oridd"];
  echo  $value;
?>