不能（通过jQuery和AJAX）在一个页面加载提交相同的形式两次 [英] Can't submit the same form twice within one page load (via jQuery and AJAX)

问题描述

我玩弄写一个模拟终端网页为我的服务器管理应用程序。基本上，使用jQuery，Ajax和PHP的了shell_exec（），我模拟一个终端。

I'm toying with writing a mock terminal webpage for my server management application. Basically, using jquery, ajax and php's shell_exec(), I'm emulating a terminal.

终端的输入线基本上是包裹在一个形式只是一个输入元素。有一个jQuery的处理程序，触发了当表单提交Ajax请求（回车键pressed）。

The input line of the terminal is basically just an input element wrapped in a form. There's a jquery handler that fires off the ajax request when the form is submitted (enter key is pressed).

一切正常，当我提出它的第一次（当我发送的第一个命令）。然而，一旦我尝试发送第二个，页面滚动一路顶部和形式没有提交。

Everything works when I submit it the first time (when I send the first command). However, once I try to send the second one, the page scrolls all the way to the top and the form isn't submitted.

下面是jQuery的：

Here's the jquery:

$("#terminal-form").unbind('submit').submit(function() {
            var current_dir = $("#path").text();
            var command = $("#terminal-input").val();
            $.ajax({
                url: "terminal.php",
                type: "post",
                data: { current_dir: current_dir, command: command },
                dataType: 'json',
                success: function(data) {
                    $("#terminal table").remove();
                    $("#terminal").append("root@gallactica:" + current_dir + " $ " + command + "<br>");
                    if (data['output'] != '') {
                        $("#terminal").append(data['output'] + "<br>");
                    }
                    $("#terminal").append("<table class='terminal-content'><tr><td nowrap='nowrap' style='overflow:auto;whitespace:nowrap'>root@gallactica:" + data['wd'] + "$<td style='width:99%'><form style='margin:0px;padding:0px' id='terminal-form'><input id='terminal-input' type='text'></input></form></td></tr></table>");
                    $("#terminal-input").focus();
                }
            })
            return false;
        })

在成功处理程序基本上只是删除了旧的形式和结果插入明文，基本上给人错觉，以为它是所有互动。

The success handler basically just removes the old form and inserts the results in plaintext, essentially giving the illusion that it's all interactive.

下面是PHP的后端：

<?php

$current_dir = $_POST['current_dir']; // get current directory
$command = $_POST['command']; // get the command to run
chdir($current_dir); // change into the right directory

if (substr($command, 0, 2) == "cd") {
    chdir(substr($command, 3));
    $output = "";
} else {
    $output = shell_exec($command); // get the command's output
}

$wd = shell_exec('pwd'); // get the current working directory
$result = array('wd' => $wd, 'output' => $output); // create array
$result = json_encode($result); // convert to json for jquery
echo $result;

现在的问题是，当我去提交第二个命令。我甚至不认为形式被正确提交。我做了一些googleing，发现您需要解除绑定的处理程序，这是我在做，但它仍然是行不通的。

The problem is when I go to submit a second command. I don't even think the form is being submitted correctly. I did some googleing and found that you need to unbind the handler, which I'm doing, but it still isn't working.

推荐答案

当你更换一个元素你失去它的事件处理程序，即使你更换完全相同的HTML。你们看到的是形式提交默认浏览器的方法，这是造成重新加载页面

As soon as you replace an element you lose it's event handlers, even if you replace with exact same html. What you are seeing is form being submitted by default browser method which is causing a page reload

要解决这个问题，你可以委托提交处理程序，以便它会为未来的形式还装载

To get around this you can delegate the submit handler so it will work for future form loaded also

$(document).on('submit', "#terminal-form",function() {
   /* handler code*/
})

这将绑定处理程序的文件它总是存在，并且将目标只有ID为您的具体形式。不会与任何其他形式的干涉提交处理页面

This will bind the handler to the document which always exists, and will target only the ID for your specific form. Will not interfere with any other forms submit handlers in page

这篇关于不能（通过jQuery和AJAX）在一个页面加载提交相同的形式两次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！