Ajax - 如何将参数从 html 输入发送到服务答案

【问题标题】：Ajax - how to send parameters from html inputs to serviceAjax - 如何将参数从 html 输入发送到服务
【发布时间】：2017-01-05 10:03:25
【问题描述】：

我想将两个输入的日期作为参数发送到服务。我的 HTML 代码：

<input type="date" name="dateFrom" value="2016-10-29">
<input type="date" name="dateTo" value="2016-11-29">
<a class="action-button" id="history-report">Generate report</a>

目前我只是硬编码日期值，但稍后将从日历中选择它们。

我想将日期值与请求一起发送。我编写了以下代码将它们发送到服务：

$('#history-report').click(
    function(event){
        event.preventDefault();
        showLoading()
        const dateFrom = $('input[name="dateFrom"]').val();
        const dateTo = $('input[name="dateTo"]').val();
        $.ajax({
            type:"POST",
            url:'/params/generate-commission-disposition-report',
            data: {
                dateFrom: dateFrom,
                dateTo: dateTo
            },
            dataType:'json'
        }).done(function(response){
            hideLoading();
            if(response.success === true){
                $('#ajax-success').html(response.msg);
                showSuccess(5000);
            }else{
                showError("Generation error");
            }
        })
        .fail(function(response){
            hideLoading();
            showError("Generation failed")
        });
    }      
);

代码是正确的解决方案吗？目前它不起作用，但我不确定是这里有错误还是我以后使用的服务中存在错误。

【问题讨论】：

您是否使用浏览器工具调试过您的源代码？浏览器控制台会告诉你 JavaScript 是否有错误，网络工具会显示任何调用/请求和响应...如果你还没有调试源代码，我建议你调试一下。
当您说“不工作”时...您是否收到“生成错误”或“生成失败”消息之一？还是什么也没显示？正如 NewToJS 所要求的，如果您仍然无法找到问题，您应该在浏览器的开发者控制台中发布输出
在 Chrome 控制台中，我得到了“500（内部服务器错误）”。在 FIrefox 上我什么也没得到，只是在网站上显示“失败”消息（在 fail 方法中定义）。
只是拼写错误。你写的是dataFrom 而不是dateFrom（“to”部分也是如此）
@yuvi - 你说得对，真丢脸。但是，这并没有改变情况，山雀是一样的，什么也没有产生。

标签： javascript jquery ajax input

【解决方案1】：

您在以下两行中编写了 dataFrom 和 dataTo 而不是 dateFrom 和 dateTo。请更改它们，它将起作用：

const dateFrom = $('input[name="dateFrom"]').val();
const dateTo = $('input[name="dateTo"]').val();

其他一切看起来都很好。

【讨论】：

你是对的，但纠正它对我来说并没有太大变化，它仍然没有生成。无论如何，如果你说它看起来还不错，我会更深入地了解该服务的工作原理。
尝试在调试器的网络选项卡中检查您的请求，检查此请求的参数是否包含正确的值。还要在您的服务方法上添加一个断点并检查它是否被调用。！！
确实，这个问题现在只依赖于服务。谢谢！