Отправить форму и передать значения с помощью ajax

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 и тип должны быть получены формой без обновления страницы, поэтому я могу отправить ее на server.php и сделать некоторые вещи
Как я могу это сделать без изменения этой структуры jsonData и т. Д.?
Потому что мне нужно, чтобы строить диаграммы.

Спасибо еще раз 🙂 ps: Обратите внимание, если я не был чист 🙂

Представляя форму (например, приведенную ниже) на вашей странице, некоторые 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> 

Предполагая, что ваша форма имеет id и каждый из ваших входов формы имеет name вы можете использовать функцию jQuery serialize() которая будет отправлять данные формы в URL-адрес вашего запроса ajax. Что-то вроде этого:

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

Обратите внимание на добавление опции data в вызов ajax, где #myForm – это идентификатор вашей формы.

Так, например, если бы вы

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

в вашей форме запрос ajax будет фактически отправлен на server.php?start_date=2012-11-20