Question

我想进行提交操作，所以当我点击提交时，页面将不会刷新，我在div1输入的数据将发送到kanjiconverter.php并通过{{1}显示给div2 }}。我在这些页面中有3个表单。

这里是我的kanjiconverter.php。我在这里保存提交代码。

<?php echo $newkanji ?>

我的表单代码在这里。提交按钮位于<?php if(isset($_POST['submit1'])){ $kanji = ($_POST['convertkanji']); $replacements = [ 'class="rt">' => "", ]; $newkanji = strtr($kanji, $replacements); } ?>但我使用div1标记而不是input标记。

button

继承我的jquery脚本。我把它放在<form id="convertkanji" method="post" action="kanjiconverter.php"></form> <form> <div class="form-row">  <div id="div1" class="form-group col-md-6"> <label for="convertkanji">Kanji Convert</label> <textarea id="convertkanji1" name="convertkanji" rows="10" form="convertkanji"></textarea> <input type="submit" name="submit1" class="btn btn-default" form="convertkanji" value="Convert" style="width: 100%; margin-top: 6px;" /> </div>   <div id="div2" class="form-group col-md-6" style="display: none;"> <label for="kanji">New Kanji</label> <textarea id="kanji" name="kanji" rows="12" form="tambahposting"><?php echo $newkanji ?></textarea> </div>  </form>标签上方。

<html>

我首先隐藏<script> $(function() { $('#div1').show(); $('#div2').hide(); $('input[name="submit1"]').on('click', function(e) { e.preventDefault(); $('#div1').hide(); $('#div2').show(); $.post('kanjiconverter.php', $('form').serialize(), function(response) { //Your response from the server-side }) }); }); </script>并显示div2。但是当我点击提交时，div1会隐藏，div1会显示。

我将div2放在<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>和<head>标记之间。

问题是，当我点击提交我输入的数据没有显示。只隐藏和显示谁在工作。我认为数据不会发送。

Answer 1

您有两个打开的表单标记。糟糕的HTML。请查看。

Answer 2

由于e.preventDefault（），它没有提交表单的按钮;因为如果调用此方法，则不会触发事件的默认操作，因此该按钮不会执行它想要执行的操作，即提交包含数据的表单。所以为了解决这个问题，你最需要在展示和隐藏之后添加它：
$（＆＃34;＃convertkanji＆＃34;）。submit（）;

Answer 3

您无法在ImageIO.read(getClass().getClassLoader().getResourceAsStream(path));上使用<?php echo $newkanji ?>，因为它位于不同的文件中。你应该从你的ajax响应中设置div2，并先修复你的html标记，它缺少结束标记。

Answer 4

你必须改变许多事情。您的kanjiconverter.php应该

<?php
  if(isset($_POST['submit1'])){
        $kanji = ($_POST['convertkanji']);

        $replacements = [
        'class="rt">' => "",
        ];
        echo $newkanji = strtr($kanji, $replacements);
  }
?>

您的HTML代码应如下所示：

<form>
    <div class="form-row">
    <!-- START DIV1 HERE -->
        <div id="div1" class="form-group col-md-6">
            <label for="convertkanji">Kanji Convert</label>
            <textarea id="convertkanji1" name="convertkanji" rows="10" form="convertkanji"></textarea>
            <input type="submit" name="submit1" class="btn btn-default" form="convertkanji" value="Convert" style="width: 100%; margin-top: 6px;" />
        </div>
    <!-- Ended DIV1 HERE -->

    <!-- START DIV2 HERE -->
    <div id="div2" class="form-group col-md-6" style="display: none;">
        <label for="kanji">New Kanji</label>
        <textarea id="kanji" name="kanji" rows="12" form="tambahposting"></textarea>
    </div>
    <!-- Ended DIV2 HERE -->
</form>

你的jQuery喜欢这个：

<script>
$(function() {
  $('#div1').show();
  $('#div2').hide();

  $('input[name="submit1"]').on('click', function(e) {
    e.preventDefault();
    $('#div1').hide();
    $('#div2').show();

    $.post('kanjiconverter.php', $('form').serialize(), function(response) {
      $('#kanji').html(response);
    })
  });
});
</script>

希望这对你有用。

使用jquery创建提交表单

4 个答案: