javascript - 如何从 url 获取参数并在 HTML 中使用它？

Question

我正在尝试为我的应用程序创建一个结帐流程，其中我从购物中获取产品作为 url，然后从 url 中获取参数并添加表单参数，然后一起形成另一个 url 并将其发送到 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)

用于从网址获取产品参数并添加表单数据并像我在代码中所做的那样发送。

Answer 1

我认为是...您做得对，但为了更优雅和更有效地实现多用途，使用下面的小函数可以帮助您从获取参数 >网址

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

SOURCE