จะรับตัวแปร GET และ POST ด้วย JQuery ได้อย่างไร


96

ฉันจะรับGETและให้POSTคุณค่ากับ JQuery ได้อย่างไร

สิ่งที่ฉันต้องการทำมีดังนี้:

$('#container-1 > ul').tabs().tabs('select', $_GET('selectedTabIndex'));

คำตอบ:


171

สำหรับพารามิเตอร์ GET คุณสามารถดึงได้จากdocument.location.search:

var $_GET = {};

document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function () {
    function decode(s) {
        return decodeURIComponent(s.split("+").join(" "));
    }

    $_GET[decode(arguments[1])] = decode(arguments[2]);
});

document.write($_GET["test"]);

สำหรับพารามิเตอร์ POST คุณสามารถจัดลำดับ$_POSTออบเจ็กต์ในรูปแบบ JSON ให้เป็น<script>แท็ก:

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

document.write($_POST["test"]);
</script>

ในขณะที่คุณทำอยู่ (ทำสิ่งต่างๆที่ฝั่งเซิร์ฟเวอร์) คุณอาจรวบรวมพารามิเตอร์ GET บน PHP ได้เช่นกัน:

var $_GET = <?php echo json_encode($_GET); ?>;

หมายเหตุ:คุณจะต้องใช้ PHP เวอร์ชัน 5 ขึ้นไปเพื่อใช้json_encodeฟังก์ชันในตัว


อัปเดต:นี่คือการใช้งานทั่วไปเพิ่มเติม:

function getQueryParams(qs) {
    qs = qs.split("+").join(" ");
    var params = {},
        tokens,
        re = /[?&]?([^=]+)=([^&]*)/g;

    while (tokens = re.exec(qs)) {
        params[decodeURIComponent(tokens[1])]
            = decodeURIComponent(tokens[2]);
    }

    return params;
}

var $_GET = getQueryParams(document.location.search);

3
วิธีการแยกของคุณไม่พิจารณาอาร์กิวเมนต์ที่ไม่มีค่า (”? foo & bar = baz“ => {foo: "", bar: "baz"})
Gumbo

1
จับได้ดี Gumbo! = ใน regex ควรทำเป็นทางเลือก: ... snip ... (?: = ([^ &] *))? &?) / g
Ates Goral

1. ตัวอย่าง GET แรกของคุณดูเหมือนจะไม่ได้ผลสำหรับฉัน 2. ในการอัปเดตชื่อฟังก์ชันของคุณมีการพิมพ์ผิด
Jake Wilson

คุณลองใช้งานในซาฟารีหรือโครเมี่ยมแล้วหรือยัง? มันสร้างลูปที่ไม่มีที่สิ้นสุดและทำให้เบราว์เซอร์ล่ม ลองใช้อะไรง่ายๆอย่าง "? p = 2"
MrColes

@MrColes: ใช่ เป็นเวลานานแล้วที่ฉันเขียนสิ่งนี้ ตั้งแต่นั้นมาฉันพบว่า Webkit ไม่ได้อัปเดตตัวนับตำแหน่งภายในของวัตถุ RegExp เมื่อใช้เป็นตัวอักษร ฉันจะอัปเดตคำตอบพร้อมการแก้ไข
Ates Goral


6

ทำไมไม่ใช้ PHP เก่า ๆ ตัวอย่างเช่นสมมติว่าเราได้รับพารามิเตอร์ GET 'target':

function getTarget() {
    var targetParam = "<?php  echo $_GET['target'];  ?>";
    //alert(targetParam);
}

7
เนื่องจากนี่เป็นโซลูชันฝั่งเซิร์ฟเวอร์และคำถามเกี่ยวกับฝั่งไคลเอ็นต์ / javascript / jQuery
Hrvoje Kusulja

@hkusulja เพิ่มการดูถูกการบาดเจ็บ: แม้ว่าคุณจะยืนยัน แต่ฉันก็ยังไม่เห็นว่าคำถามนี้เป็นคำถามเฉพาะฝั่งเซิร์ฟเวอร์ ฉันรู้สึกหนาเหมือนเครื่องมือ ...
tony gil

1
สคริปต์นี้น่าเกลียด ใช้สิ่งนี้หากคุณต้องการให้ไซต์ของคุณถูกแฮ็ก หลีกเลี่ยงตัวแปรที่ผู้ใช้ป้อนเสมอ !! อย่าส่งออก $ _GET โดยตรง
charj

5

หรือคุณสามารถใช้อันนี้http://plugins.jquery.com/project/parseQueryซึ่งมีขนาดเล็กกว่ามากที่สุด (minified 449 ไบต์) ส่งคืนวัตถุที่แสดงคู่ชื่อ - ค่า


3

ด้วยภาษาฝั่งเซิร์ฟเวอร์ใด ๆ คุณจะต้องส่งตัวแปร POST ไปยังจาวาสคริปต์

.สุทธิ

var my_post_variable = '<%= Request("post_variable") %>';

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


1
คุณไม่สามารถเข้าถึงภาษาฝั่งเซิร์ฟเวอร์ได้ตลอดเวลา ตัวอย่างเช่นหน้า GitHub ...
Adam B


2

นี่คือสิ่งที่จะรวบรวมGETตัวแปรทั้งหมดใน global object ซึ่งเป็นกิจวัตรที่ปรับให้เหมาะสมในช่วงหลายปี ตั้งแต่ jQuery เพิ่มขึ้นตอนนี้ดูเหมือนว่าเหมาะสมที่จะจัดเก็บไว้ใน jQuery เองแล้วกำลังตรวจสอบกับ John เกี่ยวกับการนำไปใช้งานหลักที่เป็นไปได้

jQuery.extend({
    'Q' : window.location.search.length <= 1 ? {}
        : function(a){
            var i = a.length, 
                r = /%25/g,  // Ensure '%' is properly represented 
                h = {};      // (Safari auto-encodes '%', Firefox 1.5 does not)
            while(i--) {
                var p = a[i].split('=');
                h[ p[0] ] = r.test( p[1] ) ? decodeURIComponent( p[1] ) : p[1];
            }
            return h;
        }(window.location.search.substr(1).split('&'))
});

ตัวอย่างการใช้งาน:

switch ($.Q.event) {
    case 'new' :
        // http://www.site.com/?event=new
        $('#NewItemButton').trigger('click');
        break;
    default :
}

หวังว่านี่จะช่วยได้ ;)



1

หาก $ _GET ของคุณมีหลายมิตินี่อาจเป็นสิ่งที่คุณต้องการ:

var $_GET = {};
document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function () {
    function decode(s) {
            return decodeURIComponent(s.split("+").join(" "));
    }

    //handling for multidimensional arrays
    if(decode(arguments[1]).indexOf("[]") > 0){
        var newName = decode(arguments[1]).substring(0, decode(arguments[1]).length - 2);
        if(typeof $_GET[newName] == 'undefined'){
            $_GET[newName] = new Array();
        }
        $_GET[newName].push(decode(arguments[2]));
    }else{
        $_GET[decode(arguments[1])] = decode(arguments[2]);
    }
});

1

ง่าย แต่ยังมีประโยชน์ในการรับ vars / ค่าจาก URL:

function getUrlVars() {
    var vars = [], hash, hashes = null;
    if (window.location.href.indexOf("?") && window.location.href.indexOf("&")) {
        hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    } else if (window.location.href.indexOf("?")) {
        hashes = window.location.href.slice(window.location.href.indexOf('?') + 1);
    }
    if (hashes != null) {
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars[hash[0]] = hash[1];
        }
    }
    return vars;
}

ฉันพบว่ามันอยู่ที่ไหนสักแห่งบนอินเทอร์เน็ตแก้ไขข้อบกพร่องเพียงเล็กน้อย


1

ใช้ฟังก์ชันต่อไปนี้:

var splitUrl = function() {
    var vars = [], hash;
    var url = document.URL.split('?')[0];
    var p = document.URL.split('?')[1];
    if(p != undefined){
        p = p.split('&');
        for(var i = 0; i < p.length; i++){
            hash = p[i].split('=');
            vars.push(hash[1]);
            vars[hash[0]] = hash[1];
        }
    }
    vars['url'] = url;
    return vars;
};

และเข้าถึงตัวแปรตามvars['index']ที่'index'ชื่อของตัวแปร get


รหัสนี้ล้มเหลวสำหรับ UTLs http://foo.com/?a=b#barเช่น มันคิดว่าb#barคุ้มค่าสำหรับa.
MM

1

ง่าย ๆ เข้าไว้

แทนที่VARIABLE_KEYด้วยคีย์ของตัวแปรเพื่อรับค่า

 var get_value = window.location.href.match(/(?<=VARIABLE_KEY=)(.*?)[^&]+/)[0]; 

0

สำหรับบันทึกฉันต้องการทราบคำตอบสำหรับคำถามนี้ดังนั้นฉันจึงใช้วิธี PHP:

<script>
var jGets = new Array ();
<?
if(isset($_GET)) {
    foreach($_GET as $key => $val)
        echo "jGets[\"$key\"]=\"$val\";\n";
}
?>
</script>

ด้วยวิธีนี้จาวาสคริปต์ / jquery ของฉันทั้งหมดที่ทำงานหลังจากนี้สามารถเข้าถึงทุกอย่างใน jGets มันเป็นทางออกที่ดีที่ฉันรู้สึก


0

แนวทางของฉัน:

var urlParams;
(window.onpopstate = function () {
var match,
      pl     = /\+/g,  Regex for replacing addition symbol with a space
       search = /([^&=]+)=?([^&]*)/g,
      decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
       query  = window.location.search.substring(1);
   urlParams = {};
   while (match = search.exec(query))
    urlParams[decode(match[1])] = decode(match[2]);
})();
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.