javascript - JQuery表单提交生成一个新表单

Question

我有一个 JQuery 脚本，它将用户输入提交到同一文件中的 PHP 脚本，然后显示 PHP 脚本对输入执行的操作的结果。那部分工作正常。我遇到的问题是，提交后，JQuery 脚本(至少我认为它是脚本)还会在原始脚本下方生成一个新的提交框。

我不知道为什么。起初我认为这是输入类型、异步部分的问题，甚至是整个代码中表单的位置问题，但这些似乎都没有发挥任何作用。我还是个初学者，只是没有看到这个问题。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<form id = "my_form">
verb <input type = "text" id ="word1"/>
<input type = "submit"/></form>
<div id="name"></div>
<script>
$(document).ready(function(){
    $("#my_form").on('submit', function(e)
{
    e.preventDefault();
    var verb = $ ("#word1").val();
    var tag = "#Latin ";
    var url = "http://en.wiktionary.org/wiki/"+verb+tag;
        $.ajax({
            url: "Parser.php",
            data: {"verb": verb},
            type: "POST",
            async: true,
            success: function(result){
                       $("#name").html(result);
                       $("#name").append(url);

                    }
        });
 });
});</script>

结果:

PHP

<?php 

    $bank = array();
    function endsWith($haystack, $needle) {
        return $needle === "" || (($temp = strlen($haystack) - strlen($needle)) >= 0 && strpos($haystack, $needle, $temp) !== false);
    }
    function check_end_array($str, $ends)
    {
       foreach ($ends as $try) {
         if (substr($str, -1*strlen($try))===$try) return $try;
       }
       return false;
    }
    function db_connect() {

        static $connection;

        if(!isset($connection)) {
            $connection = mysqli_connect('127.0.0.1','username','password','Verb_Bank');
        }

        if($connection === false) {
            return mysqli_connect_error(); 
        }
        return $connection;
    }
    function db_query($query) {
        $connection = db_connect();
        $result = mysqli_query($connection,$query);

        return $result;
    } 

    function db_quote($value) {
            $connection = db_connect();
            return "'" . mysqli_real_escape_string($connection,$value) . "'";
        }
    $y = false;
    if (isset($_POST['verb'])){
    $y=db_quote($_POST['verb']);
    echo $y;
    echo "\n";

    $m = db_query("SELECT `conjugation` FROM normal_verbs WHERE (" . $y . ")  LIKE CONCAT('%',root,'%')");
    if($m !== false) {
        $rows = array();
        while ($row = mysqli_fetch_assoc($m)) {
            $rows[] = $row;
            }
    }
    foreach ($rows as $key => $value){
        if (in_array("first",$value)==true){
        echo "first conjugation verb\n";}
        $y = $_POST["verb"];
        $x = $y;
        foreach ($bank as $key => $value) 
           (series of IF-statements) 
    }}?>

Answer 1

正如 Roamer-1888 所说，问题出在服务器端，您返回的 html 也有输入。您需要更改代码以仅返回附加到 div 的结果字符串。否则，如果这在服务器端不可能完成，因为它可能需要您更改大量代码，那么您可以从结果中删除输入元素，然后将其附加到 div。就像下面这样。

 success: function(result){
                   var div = document.createElement('div');
                   div.innerHTML = result;
                   $(div).find('input').remove();

                   $("#name").html(div.innerHTML);
                   $("#name").append(url);

                }