提交表单并与阿贾克斯值传递 [英] Submit form and pass values with 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);
    (...)

这瓦尔： START_DATE，END_DATE和类型应该由一个表格而无需刷新页面获得，这样我就可以把它送到server.php并做一些东西
我如何能做到这一点不改变这种jsonData结构等？
因为我需要它来建立图表。

This vars: start_date, end_date and type should be obtained by a form without refreshing the page, so I can send it to server.php and do some stuff
How can I do that without change this jsonData structure etc ?
Because I need it to build charts.

感谢一个更多的时间:) PS：注意我，如果我不是清楚的：）

Thanks one more time :) ps: Notice me if I wasnt clear :)

推荐答案

想象一种形式（如下面的一个）页面上，一些jQuery将让你抢值输入到文本字段和存储到JavaScript变量然后你可以在你的drawChart（）函数中使用。

Imagining a form (such as the one below) on your page, some jQuery would allow you to grab the values entered into the text fields and store into javascript variables that you can then use in your drawChart() function.

<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>

这篇关于提交表单并与阿贾克斯值传递的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！