如何從URL獲取參數並在HTML中使用它？

Question

我正在嘗試為我的應用程序創建一個結帳流程，在該流程中，我從購物中獲得商品作為網址，然后從網址中獲取參數並添加表單參數，然后一起形成另一個網址，並將其發送到我保存的php文件中收到的數據。 我只是想知道我的操作方式是否正確。 如果不能，請通過糾正幫助我。

這是checkout.js

 function formload() {
 $('form').submit(function(event) {

    $('.form-group').removeClass('has-error');
    $('.help-block').remove(); 
    var formData = {
        'fname'             : $('input[name=fname]').val(),
        'email'             : $('input[name=email]').val(),
        'phone'             : $('input[name=phone]').val(),
        'address'           : $('input[name=address]').val(),
        'zip'               : $('input[name=zip]').val(),
        'Product'           : location.search.substring(1)
    };
    $.ajax({
        type        : 'GET',
        url         : 'http://localhost/donotdel/process.php',
        data        : formData,
        dataType    : 'json',
        encode      : true
    })
        .done(function(data) {

            console.log(data); 

            if ( ! data.success) {

                if (data.errors.fname) {
                    $('#fname-group').addClass('has-error');
                    $('#fname-group').append('<div class="help-block">' + data.errors.name + '</div>');
                }

                if (data.errors.email) {
                    $('#email-group').addClass('has-error');
                    $('#email-group').append('<div class="help-block">' + data.errors.email + '</div>');
                }

                if (data.errors.phone) {
                    $('#telephone-group').addClass('has-error');
                    $('#telephone-group').append('<div class="help-block">' + data.errors.email + '</div>');
                }

                if (data.errors.address) {
                    $('#address-group').addClass('has-error');
                    $('#address-group').append('<div class="help-block">' + data.errors.email + '</div>');
                }

                if (data.errors.zip) {
                    $('#Zip-group').addClass('has-error');
                    $('#Zip-group').append('<div class="help-block">' + data.errors.email + '</div>');
                }

                if (data.errors.products) {
                    $('#Product-group').addClass('has-error');
                    $('#Product-group').append('<div class="help-block">' + data.errors.email + '</div>');
                }

            } else {

                $('form').append('<div class="alert alert-success">' + data.message + '</div>');

                window.location = 'http://www.dekhodaily.com';

            }
        })

        .fail(function(data) {
            console.log(data);
        });
    event.preventDefault();
   });
  }

所以我的疑問是我可以使用

'Product'           : location.search.substring(1)

用於從url獲取產品參數並與表單數據一起添加並發送，就像我在代碼中所做的那樣。

Answer 1

我認為是 。。。您的做法正確，但是要成為一種更優雅，更有效的多功能使用方式，下面的小功能可以幫助您從url獲取parameters

function getUrlParameter(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) 
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam) 
        {
            return sParameterName[1];
        }
    }
}    

現在說您的網址是

http://dummy.com/?product=someId&somemoreDetail=somethingelse

您可以按以下方式獲取它：

var pid = getUrlParameter('product');
var somedetail = getUrlParameter('somemoreDetail');

下面是如何集成到代碼中：

假設您的網址是https://www.something.com?product=someID

$('form').submit(function(event) {
    $('.form-group').removeClass('has-error');
    $('.help-block').remove(); 

    var prod=getUrlParameter('product');
    //prod will now have the value someID
    var formData = {
        'fname'             : $('input[name=fname]').val(),
        'email'             : $('input[name=email]').val(),
        'phone'             : $('input[name=phone]').val(),
        'address'           : $('input[name=address]').val(),
        'zip'               : $('input[name=zip]').val(),
        'Product'           : prod
    };

    //Other ajax codes
});

資源