html原生从js获取数据,从html获取数据 并使用ajax或js将数据传递回前端

我正在尝试从网页获取数据到我的flask应用程序,并对其进行一些操作后,输出列表即试图将其作为下拉列表发送回前端。

到目前为止,我所做的是:

有一个用户表单,用户在其中输入详细信息并单击提交,然后获得json输出。

以这种形式,我有一个搜索按钮,当用户输入一个字符串时,该字符串将被发送到flask应用程序路由,并且只需执行很少的搜索操作并输出项目列表(直到这部分工作为止!)

我需要开始工作的是输出列表,应再次将其发送回表单页面,而我无法使其正常工作。

这是我到目前为止所做的:

var successFunction = function(response) {

/* do something here */

$('#info').html(JSON.stringify(data, null, ' '));

});

}

$(function(){

$('#btnSignUp').click(function(){

$.ajax({

url: '/signUp',

data: $('form').serialize(),

type: 'POST',

success: successfunction(response)

error: function(error){

console.log(error);

}

});

});

});

flask应用程序具有以下内容:

from flask import Flask, render_template, request,jsonify,url_for

import json,os,re

app = Flask(__name__)

@app.route('/',methods=['GET','POST'])

def form():

if request.method == 'POST': #this block is only entered when the form is submitted

result = { key: value[0] if len(value) == 1 else value

for key, value in request.form.iterlists()

}

return json.dumps(result,indent=2)

return render_template('form_backup1.html')

@app.route("/signUp", methods=["POST","GET"])

def signUp():

jsdata = request.form['Nitro']

this dropdown_list list>

return jsonify(dropdown_list)

if __name__ == '__main__':

app.run(host="0.0.0.0",port="5000",debug = True)

删除html页面只是为了显示搜索框:

Nitro_search:

Search

 
  

就像我说的那样,当用户单击搜索时,我能够获得html表单中用户输入的文本。python的输出列表是我无法到达前端的地方。

任何帮助,将不胜感激。

谢谢

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 URL 来获取 `${type}` 对象的数据,您需要在后端创建一个相应的接口来处理该请求,并将数据传递前端页面。 以下是一个示例,展示了如何使用 URL 获取 `${type}` 对象的数据: 1. 后端控制器代码: ```java @RestController @RequestMapping("/api/type") public class TypeController { @GetMapping public List<Type> getTypeData() { // 在这里编写获取 ${type} 对象数据的逻辑 List<Type> typeData = yourService.getTypeData(); // 假设您有一个 Service 类来处理相关逻辑 return typeData; } } ``` 在上面的代码,我们创建了一个 `TypeController` 类,并使用 `@RestController` 和 `@RequestMapping` 注解来定义请求的路径。`@GetMapping` 注解用于处理 GET 请求。在 `getTypeData` 方法,您可以编写逻辑来获取 `${type}` 对象的数据,并将其作为列表返。 2. 前端页面的 JavaScript 代码: ```javascript $.ajax({ url: '/api/type', method: 'GET', success: function(data) { // 在成功处理返数据 // 根据数据动态生成 <option> 元素 var selectElement = $('#your-select-element'); // 通过选择器获取 <select> 元素 // 清空 <select> 元素的选项 selectElement.empty(); // 根据返数据生成 <option> 元素并插入到 <select> data.forEach(function(type) { var optionElement = $('<option>') .text(type.dictLabel) .val(type.dictValue); selectElement.append(optionElement); }); }, error: function() { // 处理请求失败的情况 } }); ``` 在上述代码,我们使用了 `/api/type` 作为 URL 发起了 GET 请求,该 URL 与后端控制器的路径一致。在请求成功的调函数,我们处理返数据,并根据数据动态生成 `<option>` 元素,将其插入到指定的 `<select>` 元素。 请注意,示例代码使用了 jQuery 的 Ajax 方法,您也可以使用其他 JavaScript 库或原生 JavaScript 来实现类似的功能。 通过以上步骤,您可以使用 URL 从后端获取 `${type}` 对象的数据,并在前端页面进行动态展示。 希望以上解答对您有帮助。如果您还有其他问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值