如何从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
});

资源