Javascript 如何将参数与表单数据一起添加到URL？

我试图使用表单将一些数据发送到一个php文件，在那里我将把参数保存到数据库中。在这里，我可以发送表单数据，但不能发送参数，这是我想要发送的

下面是我编写的JavaScript代码

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

    $('.form-group').removeClass('has-error');
    $('.help-block').remove(); 
    var formData = {
        'firstname'         : $('input[name=firstname]').val(),
        'lastname'          : $('input[name=lastname]').val(),
        'email'             : $('input[name=email]').val(),
        'telephone'         : $('input[name=telephone]').val(),
        'address1'          : $('input[name=address1]').val(),
        'address2'          : $('input[name=address2]').val(),
        'city'              : $('input[name=city]').val(),
        'zip'               : $('input[name=zip]').val(),
        'state'             : $('input[name=state]').val(),
        'country'           : $('input[name=country]').val(),
        'Product'           : '&model=1&quantity=3&model=2&quantity=2'
    };
    $.ajax({
        type        : 'GET',
        url         : 'http://localhost/test/www/checkout.php',
        data        : formData,
        dataType    : 'json',
        encode      : true
    })
        .done(function(data) {

            console.log(data); 

            if ( ! data.success) {

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

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

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

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

                if (data.errors.country) {
                    $('#country-group').addClass('has-error');
                    $('#country-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();
 });
}

函数formload（）{
$（'form'）。提交（函数（事件）{
$（'.form group'）.removeClass（'has-error'）；
$（'.help块'）.remove（）；
var formData={
'firstname'：$（'input[name=firstname]'）。val（），
'lastname'：$（'input[name=lastname]'）。val（），
'email'：$（'input[name=email]'）。val（），
'telephone'：$（'input[name=telephone]'）。val（），
'address1'：$（'input[name=address1]'）。val（），
'address2'：$（'input[name=address2]'）。val（），
'city'：$（'input[name=city]'）。val（），
'zip'：$（'input[name=zip]'）。val（），
'state'：$（'input[name=state]'）。val（），
“country:$（“input[name=country]”）。val（），
“产品”：“&model=1&quantity=3&model=2&quantity=2”
};
$.ajax({
键入：“GET”，
网址：'http://localhost/test/www/checkout.php',
数据：formData，
数据类型：“json”，
编码：正确
})
.完成（功能（数据）{
控制台日志（数据）；
如果（！data.success）{
if（data.errors.fname）{
$（'#firstname group'）.addClass（'has-error'）；
$（“#firstname group”）.append（“”+data.errors.name+“”）；
}
if（data.errors.fname）{
$（'#lastname group'）.addClass（'has-error'）；
$（“#lastname group”）.append（“”+data.errors.name+“”）；
}
if（data.errors.email）{
$（“#电子邮件组”）.addClass（'has-error'）；
$（“#电子邮件组”）.append（“”+data.errors.email+“”）；
}
if（数据、错误、电话）{
$（“#电话组”）.addClass（'has-error'）；
$（“#电话组”）.append（“”+data.errors.name+“”）；
}
if（data.errors.address1）{
$（“#address1 group”）.addClass（'has-error'）；
$（“#地址1组”）.append（“”+data.errors.email+“”）；
}
if（data.errors.city）{
$（“#城市组”）.addClass（'has-error'）；
$（“#城市组”）.append（“”+data.errors.email+“”）；
}
if（data.errors.zip）{
$（'#Zip group'）.addClass（'has-error'）；
$（“#Zip组”）.append（“”+data.errors.email+“”）；
}
if（data.errors.state）{
$（“#状态组”）.addClass（'has-error'）；
$（“#状态组”）.append（“”+data.errors.email+“”）；
}
if（data.errors.country）{
$（“#国家组”）.addClass（'has-error'）；
$（“#国家组”）.append（“”+data.errors.email+“”）；
}
if（data.errors.products）{
$（“#产品组”）.addClass（'has-error'）；
$（“#产品组”）.append（“”+data.errors.email+“”）；
}
}否则{
$（'form'）.append（“”+data.message+“”）；
window.location=http://www.dekhodaily.com';
}
})
.失败（功能（数据）{
控制台日志（数据）；
});
event.preventDefault（）；
});
}

---

在这里，formdata是我想要发送的，同时我还想发送产品参数。

因为您有多组相同的名称，

模型

和

数量

重复，所以我假设它是一个数组。只需将其更改为：

var formData = {
    'firstname'         : $('input[name=firstname]').val(),
    'lastname'          : $('input[name=lastname]').val(),
    'email'             : $('input[name=email]').val(),
    'telephone'         : $('input[name=telephone]').val(),
    'address1'          : $('input[name=address1]').val(),
    'address2'          : $('input[name=address2]').val(),
    'city'              : $('input[name=city]').val(),
    'zip'               : $('input[name=zip]').val(),
    'state'             : $('input[name=state]').val(),
    'country'           : $('input[name=country]').val(),
    'Product'           : [{
            "model": 1,
            "quantity": 3
        },
        {
            "model": 2,
            "quantity": 2
        }
    ]
};

---

实际上，您可以通过两个函数来实现这一点：

使用此方法编码JSON对象：

此代码：

var params = { width:1680, height:1050 };
var str = jQuery.param( params );
$( "#results" ).text( str );

$.getJSON('http://yoururl.com/index.html?param1=value1&param2=value2', function(data) {
    // the JSON is in the data variable
});

将返回

width=1680和height=1050

并使用以下代码将url解码为JSON：

使用此代码：

var params = { width:1680, height:1050 };
var str = jQuery.param( params );
$( "#results" ).text( str );

$.getJSON('http://yoururl.com/index.html?param1=value1&param2=value2', function(data) {
    // the JSON is in the data variable
});

---

（代码来源：）

以防我不知道数组的大小。如何包含所有模型？如果将其作为数组发送，如何将相同的数组转换为php文件中的单个值？另一件事。如果我使用location.search从另一个url获取了产品数据，那么我将如何将其添加到当前url中，因为我不知道该url的大小，只有您必须这样做。。。查看PHP中的

var\u dump（$\u POST）

，看看它是如何呈现的。如果我使用location.search从另一个url获取了产品数据，那么我将如何将其添加到当前url中（我在帖子中更正了代码）。我真的不明白你想要什么。如果只需要添加参数，在您的

formData

var中添加

param:value

。我完全更改了答案以满足您的需要。我想在这个url中传递的参数有两种..1）它是表单数据2）它是我从另一个参数获得的数据..我开发了一个签出流程，通过url从购物车。我从url中取出products参数，将其与表单数据一起添加，并将其发送到一个php文件，在该文件中提取并保存所有数据。现在我的疑问是如何从购物车的url中获取参数，将其与结帐中的表单数据一起添加并转发到php文件。他们使用第二个函数（

jquery.getJSON

）来检索url中的参数，或者在javascript代码中使用类似的php代码：

。