javascript - 显示 jquery 结果，数据在那里但不显示

问题描述

使用烧瓶和 jquery。我可以看到开发工具中返回的数据，但我没有显示。

索引.html

<!DOCTYPE HTML>

<html>
    <head>
        <title>integrator</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
        <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/skel.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/skel-layers.min.js') }}"></script>
        <script src="{{ url_for('static', filename='js/init.js') }}"></script>
        <script src="{{ url_for('static', filename='js/searchUpdate.js') }}"></script>
        <link rel="stylesheet" href="{{ url_for('static', filename='css/skel.css') }}" />
        <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" />
    </head>
    <body id="top">

        <!-- Header -->
            <header id="header" class="skel-layers-fixed">
                <h1><a href="#">Integrator</a></h1>
                <nav id="nav">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="">Acct. Info</a></li>
                        <li><a href="">Ticket Search</a></li>
                        <li><a href="no-sidebar.html">Sharepoint</a></li>
                    </ul>
                </nav>
            </header>

        <!-- Banner -->
            <section id="banner">
                <div class="inner">
                    <h2>integrator</h2>
                    <p>CNG service integrator</p>
                    <p><form class="pure-form" action="/clientLookup" method="post">
                            <input type="text" class="pure-input-rounded" name="clientID">
                        <button type="submit" class="pure-button">Search</button>
                    </form></p>
                </div>
            </section>

        <!-- One -->
        {% block content %}
        {% endblock %} 
        <!-- Two -->

        {% block secondContent  %}
        {% endblock %}
        <!-- Three -->
        {% block searchContent %}
        {% endblock %}
        <!-- Footer -->
            <footer id="footer">
                <div class="container">
                    <div class="row double">
                        <div class="6u">
                            <div class="row collapse-at-2">
                                <div class="6u">
                                    <h3>Links</h3>
                                    <ul class="alt">
                                        <li><a href="#">Link to stuff</a></li>
                                        <li><a href="#">Link to stuff</a></li>
                                        <li><a href="#">Link to stuff</a></li>
                                    </ul>
                                </div>
                                <div class="6u">
                                    <h3>Links</h3>
                                    <ul class="alt">
                                        <li><a href="#">Link to stuff</a></li>
                                        <li><a href="#">Link to stuff</a></li>
                                        <li><a href="#">Link to stuff</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="6u">
                            <h2>integrator</h2>
                            <p>Connecting Sharepoint, Tigerpaw, Appenate,
                            Teams, and documentation into one interface</p>
                        </div>
                    </div>
                    <ul class="copyright">
                        <li>&copy; Untitled. All rights reserved.</li>
                    </ul>
                </div>
            </footer>

    </body>
</html>

搜索更新.js

$(function() {
  $('a#process_input').bind('click', function() {
    $.getJSON('/soSearch', {
      searchTerm: $('input[name="searchTerm"]').val(),
      workType: $('input[name="workType"]:checked').val(),
      clientID: $('input[name="acctNumber"]').val(),
    }, function(data) {
      $("#result").text(data.result);
    });
    return false;
  });
});

用于索引的相关 html 块。保存在 clientInfo.html 中（如果重要的话，所有 3 个块都在同一个文件中）

{% block searchContent %}
            <section id="three" class="wrapper style1">
                <div class="container">
                    <div class="row">
                        <div class="12u">
                            <section>
                                <h2>SO Search</h2>
                                <a href="#" class="image fit"><img src="{{ url_for('static', filename='images/pic03.jpg') }}" alt="" /></a>
                                <form class="pure-form">
                                    <fieldset> 
                                        <p>
                                        <input type="text" placeholder="searchterm" name="searchTerm">
                                        <input type="hidden" name="acctNumber" value="{{ infoItems[0]['AccountNumber'] }}">
                                        <label for="option-one" class="pure-radio">
                                            <input id="option-one" type="radio" name="workType" value="WorkPerformed">
                                            Work Performed
                                        </label>

                                        <label for="option-two" class="pure-radio">
                                            <input id="option-two" type="radio" name="workType" value="WorkRequested">
                                            Work requested
                                        </label>

                                        <a href=# id=process_input><button class='pure-button'>Search</button></a>
                                        </p>
                                    </fieldset>
                                </form>
                        <p id=result></p>
                            </section>
                        </div>
                    </div>
                </div>
            </section>          
{% endblock %}

一切正常，直到尝试显示返回的数据。什么都没有显示在

<p id=result></p>

我使用这个Python/AJAX作为我的目标。

一旦我点击搜索一切正常。我可以在开发工具中看到 json 被退回。就像我说的，什么都没有显示。

作为第二个问题，由于我传回了一些<p>不起作用的信息，所以它只是用于测试。我是否应该假设如果我想构建一个必须在 js 内部完成的返回数据的动态表，而不是 python，因为没有真正的页面刷新？

标签： javascriptjqueryajax

javascript - 显示 jquery 结果，数据在那里但不显示

问题描述

解决方案

推荐阅读