将数据从服务器发送到客户端 - ajax

Send data from server to client - ajax

本文关键字:客户端 ajax 数据 服务器      更新时间:2023-09-26

我需要调用一些python函数并在div id="places"部分中显示其结果(实际上是几个列表对象)。我正在尝试在 Javascript 函数 show_sec() 中执行此操作,但我找不到如何从服务器捕获数据并在客户端上处理它。

我的任务非常简单和基本,但由于这是我的第一个Web项目,我需要一些ajax的帮助。求求你,帮帮我。

这是我代码的一部分:

。.html

{% include "header.html" ignore missing %}
 <!-- contents of nearest banks page -->
    <section id="ask_user">
            <div id="question">Разрешить приложению определить Ваше место расположения для нахождения ближайших банков?</div>
            <div id="buttons">
                <input type="button" name="yes" value="Да, разрешить" onclick="show_sec()"/>
                <input type="button" name="no" value="Нет, не разрешать" onclick="dnt_show_sec()"/>
            </div>
    </section>
        <section id="allowed" style="display:none;">
            <div id="map_canvas"></div>
            <div id="nearest_banks">
                <form action="/nearest_banks/radius" method="get" id="send_radius">
                  Курс ближайших банков на сегодня в радиусе
                  <input type="text" name="radius" id="radius" size="5" value={{radius}} >
                  <input type="submit" class="button" value="V">
                   метров
                </form>
                <div id="check"> {{output}}</div>
                <div id="places"> </div>
            </div>
        </section>
        <section id="not_allowed" style="display:none;">
            <div class="question"> Приложение не имеет возможности определить близ лежащие банки.<div>
        </section>

</body>
<script type="text/javascript">
   /* frm.submit(function () {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serializeArray(),
            cache: false,
            success: function () {
                $("#check").html("OK!!!");
            },
            error: function(data) {
                $("#check").html("Something went wrong!");
            }
        });
        return false;
    }); */
    function show_sec() {
        document.getElementById('allowed').style.display = "block";
        document.getElementById('ask_user').style.display = 'none';
        $.ajax({
            type: "get",
            url: "/nearest_banks/radius",
        }).success(function(data) {
            $("#places").html(data);
            /*alert ("OK !!!"); */
        });
    }
    function dnt_show_sec() {
        document.getElementById('not_allowed').style.display = "block";
        document.getElementById('ask_user').style.display = 'none';
    }

    $(document).ready(function(){
        $("button#yes").click(function(){
            //alert("demo_test");
            $("section#allowed").show();
        });
    });
</script>

我尝试调用的 Python 函数:

*def get(self):
        default_radius = 1000
        radius = get_radius(self)
        exceptions = [u'', 'error', 0]                    # invalid values for radius
        if any([radius in exceptions]):
            radius = default_radius
            #warning = "Вы ввели неверный радиус. Система автоматически заменила его на стандартный."
            output = radius                               # заменить на вывод банков
        else:
            #warning = ''
            output = radius                               # заменить на вывод банков
        names, location = Findplaces(self, radius)  
        body_values = {
          'names': names,
          'location': location,
          'radius': radius,
          'output': output,
          #'warning': warning,
        }
        template = jinja_env.get_template('nearest_banks.html')
        self.response.out.write(template.render(body_values))*

简而言之,我的目标是在单击""按钮后在标签div id="places"中显示名称和位置

或者,也许我可以通过在python函数中使用jinja2从服务器端开始显示特定标签。

求你,帮帮我。我花了时间在它上面仍然无法让它很好地工作。提前感谢!

编辑:

当我单击"是"按钮时,show_sec函数加载允许 id 的部分问题:表单中的操作未被处理。因此,仅显示html,但不接收来自服务器的数据。

由于网址是"/nearest_banks/radius"并且它是一个get,请尝试在浏览器中打开它以查看显示的内容。您可能需要在返回的页面上查看源代码才能正确查看。您应该首先验证 Web 服务的功能,它是否返回某些内容,并返回正确的内容。

之后,在您的show_sec函数中,进行反复试验以查看会发生什么。如果将请求的内容移动到与执行页面相同的路径,这有什么不同吗?