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

时间:2016-02-26 00:38:35

标签: javascript php jquery forms user-input

我有一个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>

结果: result of php 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) 
    }}?>

1 个答案:

答案 0 :(得分: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);

                }