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">

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

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

</form>

<div id="markDownContent"></div>

<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) {

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

                }

            });

        });

    });

</script>