如何从URL获取参数并在HTML中使用它?

时间:2015-06-12 05:56:51

标签: javascript jquery url hybrid-mobile-app

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

从网址获取产品参数并添加表单数据并像在代码中一样发送。

1 个答案:

答案 0 :(得分:1)

我认为 ...你正在做正确但是为了更加优雅和有效的方式多功能使用下面的小功能可以帮助你从parameters获得url

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