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

Question

我正在尝试使用表单将一些数据发送到一个 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();
 });
}

这里的 formdata 是我要发送的内容，同时我还想发送 product 参数。

Answer 1

由于您有不止一组相同的名称，model 和 quantity 会重复，所以我假设它是一个数组。只需将其更改为：

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

Answer 2

其实你可以通过两个函数来实现：

用这个方法编码你的 JSON 对象：

jquery.param

这段代码：

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

将返回width=1680&height=1050

并用这个将 url 解码为 JSON：

jquery.getJSON

使用此代码：

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

（代码来自：How to get JSON from URL in Javascript?）