AJAX 按钮消失

Question

我在 laravel 中有一个网络应用程序，我有一个简单的文本区域，其表单允许用户输入一些基本的降价文本，我需要它以两个 HTML 标记输出数据，然后是正常格式，我的主要问题是我的按钮消失了第一次提交后，我似乎只能让它打印出 HTML 格式或文本值，但不能同时打印出两者。我对 AJAX 有点陌生，所以任何帮助都会很棒。这是我的 AJAX 代码和表单的一部分。

<form action="{{action('MarkDownController@process')}}" method="post" name="markdownform" id="markdownform">

    <input name="_token" type="hidden" value="{{ csrf_token() }}"/>

    <input type="button" id="ctaPrimary" value="Parse"/>

</form>

<script>

      $(function () {

        $('#ctaPrimary').click(function(e) {

          e.preventDefault();

          $.ajaxSetup({headers: {

                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

            }});

          $.ajax({

            type: 'post',

            url: 'process',

            crossDomain:'true',

            data: $('#markdownform').serialize(),

            success: function (data) {

                $("#markdownform").html(data);

            }

          });

        });

      });

    </script>

所以我能够通过改变整体解决我的问题

data: $('#markdownform').serialize(),

            success: function (data) {

                $("#markdownform-html").html(data);

                $("#markdownform-text").text(data);

            }

只需添加：

<div id="markdownform-html"></div>

<div id="markdownform-text"></div>

我想我的最后一个问题是，$("#markdownform-text").text(data);如果元素之间有空格而不是它在下面显示的方式，我希望数据显示在新行上，仅在一个长块中：

<h1>Header one</h1> <p>Hello</p> <p>more text <br />What's going on?</p> <h2>Another Header</h2> <p>something hear, eh?</p>

Answer 1

您正在替换<form>标签中的内容，您需要将其单独放置<div>以确保它不会更改其中的 HTML。<form action="{{action('MarkDownController@process')}}" method="post" name="markdownform" id="markdownform">&nbsp; &nbsp; <input name="_token" type="hidden" value="{{ csrf_token() }}"/>&nbsp; &nbsp; <input type="button" id="ctaPrimary" value="Parse"/></form><div id="markDownContent"></div><script>&nbsp; &nbsp; $(function () {&nbsp; &nbsp; &nbsp; &nbsp; $('#ctaPrimary').click(function(e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajaxSetup({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'post',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: 'process',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; crossDomain:'true',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: $('#markdownform').serialize(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function (data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#markDownContent").html(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });</script>