ajax返回的数据 写入html

<li class="tab abc"  value="1">标题</li>

<div class="contentalla">
	<li>
		<p>标题</p>
	</li>
</div>
			
			
<script>
    $(document).ready(function(){
        $(".tab").click(function(){
            var id = $('.abc').val();//根据class值 获取value值
            $.ajax({
                type:'post',
                url:"",
                data:{id:id},
                dataType:'json',
                success:function(data){
      //console.log(data);//方法用于在控制台输出信息。
      /** 获取的data值 写入html **/
	        $("input[name='school']").val(data.school);
	        //单选框写入
	        $("input[name=type][value="+data.type+"]").attr("checked",true);                                                     
      /*** end **/
        
    
    var inhtml = "";
    for (var i = 0; i < data.length; i++) {
        
		inhtml +=
            `<li>
                <p>${data[i].title}</p>
            </li>`;
    }
     $(".contentalla").html(inhtml);
                }
            })
        })
    });
</script>

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 Flask 将数据写入 HTML 有多种方法,下面我列出两种常见的方法: 1. 使用模板引擎 Flask 内置了 Jinja2 模板引擎,您可以使用它来将数据传递给 HTML 模板。您需要在您的 Flask 应用程序中定义一个视图函数来渲染模板,并将数据作为参数传递给该函数。 举个例子,假设您要将一个列表中的元素渲染到 HTML 模板中,您可以在您的视图函数中这样做: ```python from flask import Flask, render_template app = Flask(__name__) @app.route('/') def index(): data = ['Apple', 'Banana', 'Orange'] return render_template('index.html', data=data) if __name__ == '__main__': app.run(debug=True) ``` 在此示例中,我们在视图函数中定义了一个名为 `data` 的列表,并将其作为参数传递给 `render_template` 函数。然后,我们可以在 HTML 模板中使用 Jinja2 模板语言来渲染数据,如下所示: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flask</title> </head> <body> <h1>Fruits</h1> <ul> {% for item in data %} <li>{{ item }}</li> {% endfor %} </ul> </body> </html> ``` 在此示例中,我们使用了 Jinja2 模板语言的 `for` 循环来遍历 `data` 列表,并将每个元素渲染为一个列表项。 2. 使用 AJAX 请求 另一种将数据写入 HTML 的方法是使用 AJAX 请求。您可以在 HTML 页面上使用 JavaScript 发送一个 AJAX 请求到 Flask 应用程序,并将响应数据写入 HTML 页面上的某个元素中。 举个例子,假设您在 Flask 应用程序中定义了一个名为 `get_data` 的路由,用于返回一些数据。您可以使用 jQuery 发送一个 AJAX 请求到该路由,并将响应数据写入 HTML 页面上的某个元素中,如下所示: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flask</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function() { $.ajax({ url: "{{ url_for('get_data') }}", type: 'GET', success: function(data) { $('#data-container').html(data); } }); }); </script> </head> <body> <h1>Data</h1> <div id="data-container"></div> </body> </html> ``` 在此示例中,我们在 HTML 页面上使用了 jQuery 库,并在页面加载时发送了一个 AJAX 请求到 Flask 应用程序的 `get_data` 路由。当响应数据返回时,我们使用 jQuery 的 `html` 函数将数据写入 HTML 页面上的一个名为 `data-container` 的 `div` 元素中。 希望这可以帮助您将数据写入 HTML 页面中,如果您有任何问题或疑问,请随时联系我。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值