时间戳

首页 > 解决方案 > AJAX 按钮消失

javascript - AJAX 按钮消失

问题描述

我在 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>

标签： javascriptphpajax

解决方案

您正在替换<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>

推荐阅读