提交表單並使用ajax傳遞值

Question

的index.html

function drawChart() {
                var jsonData = $.ajax({
                    url: "server.php?startdate=" + start_date + "&enddate=" + end_date + "&type=" type,
                    dataType: "json",
                    async: false
                }).responseText;

                var obj = jQuery.parseJSON(jsonData);
                var data = google.visualization.arrayToDataTable(obj);
    (...)

這個vars： start_date，end_date和type應該通過表單獲取而不刷新頁面，所以我可以將它發送到server.php並做一些事情
如何在不更改此jsonData結構等的情況下執行此操作？
因為我需要它來構建圖表。

再次感謝:) ps：請注意我，如果我不清楚:)

Answer 1

假設您的表單有一個id並且每個表單輸入都有一個name您可以使用jQuery serialize()函數將表單數據發送到您的ajax請求中的URL。 像這樣的東西：

var jsonData = $.ajax({
                url: "server.php",
                data: $('#myForm').serialize(),
                dataType: "json",
                async: false
            }).responseText;

注意在ajax調用中添加了data選項，其中#myForm是表單的id。

所以，例如，如果你有

<input type="text" name="start_date" />

在您的表單中，ajax請求實際上將被發送到server.php?start_date=2012-11-20

Answer 2

想象一下您頁面上的表單（例如下面的表單），一些jQuery將允許您獲取輸入到文本字段中的值並存儲到javascript變量中，然后您可以在drawChart（）函數中使用這些變量。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function(){
        $('#never_name_a_button_submit').click(function() {
            var start_date = $('start_date').val();
            var end_date = $('end_date').val();
            var type = $('type').val();
        });
    });
function drawChart() {
            var jsonData = $.ajax({
                url: "server.php?startdate=" + start_date "&enddate=" + end_date + "&type=" type,
                dataType: "json",
                async: false
            }).responseText;

            var obj = jQuery.parseJSON(jsonData);
            var data = google.visualization.arrayToDataTable(obj);
(...)

</script>

<form id="myForm">
    <input type="text" name="start_date" id="start_date"><br />
    <input type="text" name="end_date" id="end_date"><br />
    <input type="text" name="type" id="type"><br />
    <input type="button" id="never_name_a_button_submit">
</form>