显示时ajax请求重复返回结果

Question

在 displayResult 显示结果---     
        

        <div class="form-group">
            <div align="center" class="col-md-10">
                <input  type="text" id= "contentSearch" name="contentSearch" class="form-control">
            </div></div>
        <div class="form-group"><button type="submit" class="btn btn-default" id="submitSearch">Search
            </button></div>                
    </form>
</div>

<div id="displayResult">
    {% for result in chris%}{{ result.name }}{%endfor%}  
</div>

并且 ajax成功 -

    <script>
    $(document).ready(function () {
        $("#searchform").on('submit', function (e) {
            var data = {};
            data['contentSearch'] = $('#contentSearch').val();

            $.ajax({
                url: '/ourserver/applicants/istiak/home',
                type: 'post',
                data: data,
                success: function (returnedData) {
                    $("#displayResult").html(returnedData);// display
                }
            });

            return false;
        });
    });
</script>

但是在显示结果时，它会再次创建一个 -

在提出请求之前

---

请求后显示结果 -

因此它再次创建表单并同时显示基于值的结果。

如果返回结果是显示两次的2倍，如果结果有3个值，则会显示3次。

所以如何停止重复并且只显示结果!!

不是多次，只是一次!!!

任何人都知道如何解决它！

Answer 1

尝试像这样提取目标html：

$("#displayResult").html($(returnedData).find("#displayResult").html());// display