需要 AJAX 表单处理小部件的帮助答案

【问题标题】：Need assistance with an AJAX form processing widget需要 AJAX 表单处理小部件的帮助
【发布时间】：2017-02-14 02:21:28
【问题描述】：

我会尽量保持简短，同时仍然提供所需的信息，因为它是一个更大的项目的一部分。本质上，此页面的目标是隐藏默认显示为选中且需要在“提交”操作后保持可见的 CSS 元素。

问题是如何准确地做到这一点。我当前的问题是，尽管下面显示的代码在单击提交按钮后页面刷新，这也将表单可见性重置为隐藏。我需要它在处理输出 php 代码的同时保持可见。

页面分为左右两部分，其中左侧是输入（表单），右侧是所述表单的输出。该网站是用 PHP 编写的，必要时带有 HTML5/JS/CSS/AJAX。

不需要的位被截断：

***** index.php *****
<?php

echo '<!DOCTYPE html>'."\n";
echo '<html>'."\n";
echo '<head>'."\n";
echo '<meta charset="UTF-8">'."\n";
echo '<script src="base.js"></script>'."\n";
...
echo '<link rel="stylesheet" type="text/css" href="input_form.css">'."\n";
...
echo '</head>'."\n";
echo '<body>'."\n";
...
echo '<span id="input_block" style="display:none;z-index:1;">';
    require_once "input_form.php";
echo '</span>'."\n";
...
echo '</body>'."\n";
echo '</html>'."\n";
?>

***** base.js *****

var input_form = "";
var script_output = "";

//called from a multi-tier drop down menu of various form options
function show_sub(choice) {
    var input_block = document.getElementById('input_block').style;

    // Show the input form container for the first time
    if(input_block.display = "none"){
        input_block.display = 'block';
    }
    // This will hide current form to be replaced with selected form after first click
    if( input_form != "" ) {
        window.input_form.display = 'none';
    }
    // Update the current input form globally
    window.input_form = document.getElementById(choice).style;
    window.input_form.display = 'block';
}

//This is what is not working. Sourced from: http://stackoverflow.com/questions/23507608/form-submission-without-page-refresh

var input_data = $('#input_form');

input_data.submit(function (data) {
    $.ajax({
        type: input_data.attr('method'),
        url: input_data.attr('action'),
        data: input_data.serialize(),
        success: function (complete) {
            alert('data processing');
        }
    });
    data.preventDefault();
});

***** input_form.php *****

<?php
echo '
    <form id="input_form" action="index.php" method="get" name="submit">
';
    require_once "cpe_input.php";
echo '
    </form>
';
?>

***** cpe_input.php *****

<span id="cpe_3916">
            <table>
                <colgroup>
                ...
                <tr> <!-- example form field -->
                    <td class="form_text">BANDWIDTH (MB)</td>
                    <td class="form_field" colspan="5">
                        <input type="text" name="bandwidth">
                    </td>
                </tr>
                <tr>
                    <td colspan="6">
                        <input type="submit" value="GENERATE SCRIPT" class="input_submit" style="position:relative;left:-1px;" onmouseover="this.style.cursor='."'pointer'".';">
                    </td>
                </tr>
            </table>
        </span>
';

***** input_form.css // 省略，因为它只是位置和样式选项

我没有包含输出文本代码，因为它只是嵌套在页面上表单右侧的 <span> 标记中的纯文本。

我还没有解决表单验证问题，因此这涉及到在代码中执行该步骤的位置（离开字段焦点时触发 ajax）以及在所有验证通过之前阻止表单提交操作。

【问题讨论】：

标签： javascript php jquery css ajax

【解决方案1】：

看起来有人回答了here，但您可能希望将提交函数包装在 DOM Ready 中。

$(function() {
  var input_data = $('#input_form');

  input_data.submit(function (data) {
    data.preventDefault();
    $.ajax({
        type: input_data.attr('method')
        url: input_data.attr('action'),
        data: input_data.serialize(),
        success: function (complete) {
            alert('data processing')
        }
    });
  });
});

更新：

有时您必须将函数附加到文档而不是单个元素。这会减慢处理速度，但如果可行，您可以寻找如何更有效地附加到表单元素而不是整个文档。请尝试以下操作：

$(function() {
  var input_data = $('#input_form');

  $(document).on('submit', input_data, function (data) {
    data.preventDefault();
    $.ajax({
        type: input_data.attr('method')
        url: input_data.attr('action'),
        data: input_data.serialize(),
        success: function (complete) {
            alert('data processing')
        }
    });
  });
});

【讨论】：

这是明智的，但它仍然无法正常工作。如所写，页面正在刷新，并且未显示提交警报。
尝试将 preventDefault 移动到提交方法的顶部。我已经更新了我的答案以显示这一点。
不幸的是，这并没有解决问题。在提交和重置表单跨度块的可见性时，页面仍在刷新。
嗯。这似乎是一个时间问题。 preventDefault() 绝对不允许刷新页面。您在 PHP 中到 base.js 的路径是否正确？是否将这段代码放在可以查看实时示例的地方？
不幸的是，它位于专用网络上。 base.js 文件肯定正在加载，因为其中还有其他运行良好的函数。我可以粘贴整个内容，但它本质上是两个功能，可以在点击时交换 span 标签可见性。我注意到点击提交后，URL 中显示了 $_GET 数据，所以我认为这个问题可能纯粹是非刷新问题。由于所有元素的可见性设置在页面加载时都是“隐藏”的，这似乎是我正在刷新或至少重新加载的指标。