使用 BUTTON 捕获表单字段值以传递到 AJAX（不提交）答案

【问题标题】：Capturing form field value to pass into AJAX using BUTTON (not submit)使用 BUTTON 捕获表单字段值以传递到 AJAX（不提交）
【发布时间】：2012-03-14 00:46:22
【问题描述】：

我有一个带有一个输入的简单表单。该页面位于此处： Actual Page

我希望能够从字段中获取输入，捕获它，运行 ajax 来获取数据，触发 div 显示在下面，并显示数据而无需任何页面刷新或重置。如果我定义 var 值，则此代码有效：

var query = '12';
$("#buttonToClick").click(function () {
    $("#divToShow").show();
    $.post('ajax/part_detail_by_partno.php', { part: query }, function(data) {
                $("#divToShow").html(data);
    });
});

我在现场使用自动完成功能，但即使禁用，以下功能也不起作用：

var query = $("#fieldWithData").val();
    $("#buttonToClick").click(function () {
        $("#divToShow").show();
        $.post('ajax/part_detail_by_partno.php', { part: query }, function(data) {
                    $("#divToShow").html(data);
        });
    });

我假设这是因为我无法在不实际提交表单的情况下捕获数据。所以我将“按钮”更改为“提交”，没有表单操作（没有页面重新加载）。但是由于页面重新加载，#divToShow 不会打开。看看我页面上的“快速查找”框。如何获取用户的输入以触发 div 显示用户输入生成的 ajax/part_detail_by_partno.php 返回的数据？我花了几个小时试图弄清楚这一点。我是 jQuery 和 AJAX 新手，感谢您的帮助！

【问题讨论】：

在您的点击事件中添加 return false 并且它不再提交

标签： jquery ajax

【解决方案1】：

您在点击操作之外捕获“查询”的值。将它移到函数内部。

像这样：

$("#buttonToClick").click(function () {
    var query = $("#fieldWithData").val();
    $("#divToShow").show();
    $.post('ajax/part_detail_by_partno.php', { part: query }, function(data) {
                $("#divToShow").html(data);
    });
});

【讨论】：

感谢您的及时和正确回复！我会将此标记为已回答。