使用 ajax 提交表单并传递值答案

【问题标题】：Submit form and pass values with ajax使用 ajax 提交表单并传递值
【发布时间】：2012-11-10 06:11:02
【问题描述】：

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 and type应该是不用刷新页面就可以通过form获取的，所以我可以发到server.php做点什么
在不更改此 jsonData 结构等的情况下如何做到这一点？
因为我需要它来构建图表。

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

【问题讨论】：

您没有将 start_date 和 end_date 传递给 drawChart() 函数。它们是全局变量吗？
不，那个变量应该是通过表单来获取的。那是我的问题：S
Index.html 应该有一个表单，接收 start_date、end_date、type 并将其发送到 server.php，依次返回一些再次将数据（图表）复制到 index.html。
您的问题到底是什么？您收到任何错误消息吗？另外，我注意到您在这里忘记了+：start_date + "&enddate="。
你在这里缺少一个 + "&type=" 类型应该是 "&type=" + 类型。你有任何错误吗？您是否查看过开发者工具中的请求/响应？

标签： php jquery ajax google-visualization

【解决方案1】：

想象一下页面上的一个表单（如下面的），一些 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>

【讨论】：

我明天试试，但这似乎是我要找的:) 谢谢
我发出警报（开始日期），当我按下按钮时它显示“未定义”

【解决方案2】：

假设您的表单有一个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

【讨论】：

可能是这样..我试试:)
所以如果我的表单是这样的：<input type="text" name="start_date" /><input type="text" name="start_end" /> ajax 调用将是server.php?start_date=2012-11-20&end_date=2012-12-20 ?
<form id = "myform"> Start date: <br/> <input name="start_date" id="start_date" type="text" /><br /> End date: <br /> <input name="end_date" id="end_date" type="text" /><br /> <input id="submit_form" type="submit" value="Submit"> </form>?
为了获得最大的可读性，请使用上述 HTML 表单代码修改您的原始问题。另外，请注意大写：上面评论中的“myform”，但布赖恩的解决方案中的“myForm”。
@skdnewbie 是的，这就是它的工作方式，除非您保留submit 按钮，它实际上会以正常方式提交您的表单，这不是您想要的。