javascript - 使用 jquery/ajax 的基本表单提交不起作用

Question

我是 jquery 和 ajax 新手。我正在尝试让我的第一个 ajax 脚本正常工作，但它不起作用，我需要一些帮助。

我有一个 php 页面，应该发布到另一个 php 页面，后者将进行一些处理并获取一些文件进行压缩和下载。用户需要输入开始和结束日期，第二个 php 脚本将使用此信息来准备数据。这个功能在没有 jquery 的情况下工作得很好，但当我添加 jquery 时就不起作用了。

我想实现什么？我想发布到同一个 php 页面并在 <div></div> 中获取发布输出。标签。

我的第一个 php 页面包含 ( downloadPage.php ):

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<form action="doDownload.php" method="post" id="dateRangeID">
<input id='time1' class='input' name="datefield1" style="text-align:center;"/>
<input id='time2' class='input' name="datefield2" style="text-align:center;"/>    
<input type="submit" value="Download Data" name="submit" id="submitButton">
</form>
<div id="result"></div> <!-- I would like it to post the result here //-->

第二页( doDownload.php )，

<div id="content">
<?php 
if(isset($_POST['submit']))
{
    $dateVal1      = $_POST['datefield1'];
    $dateVal2      = $_POST['datefield2'];
    if($dateVal1 != $dateVal2)
    {    
        header('Content-Type: application/zip');
        header('Content-disposition: attachment; filename="file.zip"');

        $fullListOfFiles = $downloadFullTmpFolder.$filesList;
        $command = "sudo $ldlib -u myuser /usr/bin/python3 $downloadScriptFile -datadir $gnomeDataDir -time1 $dateVal1C -time2 $dateVal2C -outdir $downloadFullTmpFolder > debug_download.txt 2>&1";
        $output = shell_exec($command);

        $fp = popen('cat '.$fullListOfFiles.' | sudo -u myuser zip -@ -9 - ', 'r');

        $bufsize = 1024;
        $buff = '';
        while( !feof($fp) ) 
        {
            $buff = fread($fp, $bufsize);
            echo $buff;
        }
        pclose($fp);   
    }
    else
    {
        echo("<p>Dates have to be different in order for the download to start.</p>");
    }
}
else
{
    echo("<p>Error: Page called without submit.</p>");
}
?>
</div>

最后是downloadPage.php中的jquery部分，如果我添加它就不再起作用(我想了解如何正确执行，以及 I mainly learned from the manual of jquery，链接中的最后一个示例)

<script>
/* attach a submit handler to the form */
$("#dateRangeID").submit(
function(event) 
{
    event.preventDefault();
    var $form = $(this),
        t1 = $form.find("input[name='datefield1']").val(),
        t2 = $form.find("input[name='datefield2']").val(),
        subm = $form.find("input[name='submit']").val(),
        url = $form.attr('action');
    var posting = $.post(url, { datefield1: t1, datefield2: t2, submit: subm} );

    /* Put the results in a div */
    posting.done(function(data) {
        var content = $(data).find('#content');  // <--- So this turns out to be wrong. Right is only $(data);
        $("#result").empty().append(content);
    });
});
</script>

这有什么问题吗？请协助。谢谢。

如果您需要任何其他信息，请询问。

Answer 1

从显而易见的 Angular 来看，您有:

var content = $(data).find('#content');

您尝试在以下结果之一中查找 ID 为 content 的元素:

<p>Dates have to be different in order for the download to start.</p>

或

<p>Error: Page called without submit.</p>