ajax返回多条json数据,多表联查,多条件查询,ajax返回值乱码,前台循环展示json数据...

本文介绍了如何在Java中使用Mybatis进行多表联查,并处理前端Ajax返回值的乱码问题,通过实例展示了根据多个条件查询航运信息的方法,同时提供了前端页面的动态展示技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

多表联查,多条件查询

@Data

public class hangyunxingxi {

private int hangyunid;

private int rid;

private int starid;

private int endid;

private int dateid;

private String hangcheng;

private float price;

private String rname;

private String starname;

private String endname;

private String date;

}

/p>

PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"

"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

SELECT hangyunid,hy.rid,r.rname,hy.starid,s.starname,e.endid,e.endname,hy.dateid,sd.date,hangche ng,price FROM hangyunxingxi hy

LEFT JOIN route r ON hy.rid=r.rid

LEFT JOIN star s ON hy.starid=s.starid

LEFT JOIN `end` e ON hy.endid=e.endid

LEFT JOIN stardate sd ON hy.dateid=sd.dateid

SELECT hangyunid,hy.rid,r.rname,hy.starid,s.starname,e.endid,e.endname,hy.dateid,sd.date,hangcheng,price FROM hangyunxingxi hy

LEFT JOIN route r ON hy.rid=r.rid

LEFT JOIN star s ON hy.starid=s.starid

LEFT JOIN `end` e ON hy.endid=e.endid

LEFT JOIN stardate sd ON hy.dateid=sd.dateid

rname=${rname}

AND s.starname=${starname}

AND e.endname=${endname}

AND sd.date=${date}

前台页面展示,解决ajax返回值乱码

使用ajax请求返回前台的时候会出现乱码的情况,需要在@RequestMapping中添加produces = "application/json; charset=utf-8"

//查询并展示所有航运信息

@RequestMapping(value = "hangyunlist",method = RequestMethod.POST , produces = "application/json; charset=utf-8")

@ResponseBody

public String hangyunxingxilist(HttpServletResponse response){

response.setContentType("text/html;charset=utf-8");

List hangyunxingxis = zlxService.queryHangyunxingxi();

Gson gson2=new Gson();

String str=gson2.toJson(hangyunxingxis);

return str;

}

//更具条件查询航运信息

@RequestMapping("reach")

public String reachhangyun(String rname,String starname,String endname,String date){ // hy 参数表示从前台传回的所有查询条件

List hangyunxingxis = zlxService.reachHangyunxingxi(rname,starname,endname,date);

System.out.println("查询信息" + hangyunxingxis);

return "";

}

$(function(){

$.ajax({

url: "hangyunlist",

type:"post",

dataType: "json",

data: {},//传送请求数据

success: function(data) {//登录成功后返回的数据

var list = data;

var $tr=[];

var $td;

for(var i=0; i

$td = $('

');

$('

'+list[i].rname+'').appendTo($td);

$('

'+list[i].starname+'').appendTo($td);

$('

'+list[i].endname+'').appendTo($td);

$('

'+list[i].date+'').appendTo($td);

$('

'+list[i].hangcheng+'').appendTo($td);

$('

'+list[i].price+'').appendTo($td);

$('

快速下单').appendTo($td);

$tr.push($td);

}

for(var j=0;j

$($tr[j]).appendTo($('#hylist'));

}

}

})

})

<think>好的,我需要帮助用户解决如何使用易语言E2EE支持库操作键值表,并通过HTML界面生成JSON数据的问题。首先,我得回忆一下E2EE支持库的基本功能,它主要用于网络应用开发,支持处理HTTP请求和响应,以及数据结构的操作,比如键值表(键值对集合)。 用户提到要创建一个HTML界面来填写任意JSON数据,然后反向生成JSON代码。这意味着前端需要有一个动态的表单,允许用户添加字段,输入数据,然后通过HTTP请求将这些数据发送到后端,后端处理并生成对应的JSON结构。 首先,我应该考虑如何设计HTML界面。可能需要使用JavaScript来动态添加输入字段,这样用户可以根据需要添加任意数量的键值对。然后,当用户提交表单时,JavaScript收集所有输入的数据,并将其转换为JSON格式,通过POST请求发送到易语言的后端处理程序。 接下来是E2EE后端的处理部分。用户需要使用存取键值表来接收前端发送的JSON数据。E2EE的存取键值表可以方便地解析和构建JSON数据。在易语言中,可能需要用到“存取键值表”类的方法,比如“从JSON载入”来解析接收到的数据,或者“到JSON”来生成JSON字符串。 另外,用户需要反向生成JSON代码,这可能是指将用户输入的键值对保存为JSON文件,或者在界面上展示生成的JSON结构。这时候,后端处理完数据后,需要将键值表转换为JSON字符串,并返回给前端显示,或者保存到服务器。 我还需要注意易语言和HTML/JavaScript之间的数据交互格式,确保前后端使用相同的编码和解码方式,比如UTF-8,避免乱码问题。同时,处理POST请求时,要正确设置Content-Type为application/json,以便E2EE能够正确解析请求体中的JSON数据。 可能还需要考虑错误处理,比如用户输入无效的JSON,或者键值表操作失败时的异常处理。在易语言中,可以通过检查存取键值表的方法返回值来判断操作是否成功,并返回相应的错误信息给前端。 最后,测试整个流程是否顺畅,从前端输入数据到后端处理,再返回生成的JSON,确保各环节无误。如果有问题,需要逐步排查,比如查看网络请求是否成功,数据解析是否正确,以及JSON生成是否符合预期。 总结步骤大致如下: 1. 创建HTML界面,使用JavaScript动态添加输入字段。 2. 编写JavaScript代码收集输入数据,转换为JSON并通过POST发送。 3. 在易语言中设置E2EE处理POST请求,解析JSON到存取键值表。 4. 处理键值表数据,生成所需的JSON格式。 5. 将生成的JSON返回前端或保存到文件。 可能需要参考E2EE的官方文档,确认存取键值表的具体用法,以及HTTP服务器配置的相关方法。此外,示例代码会帮助用户更好地理解实现细节,比如如何创建动态表单,如何处理AJAX请求,以及如何在易语言中操作键值表。</think>### 解决方案 #### 一、环境准备 1. 安装E2EE支持库(版本需支持存取键值表功能) 2. 创建易语言项目并引用`E2EE.fne`支持库 #### 二、HTML界面开发 ```html <!DOCTYPE html> <html> <head> <title>JSON生成器</title> <script> let fieldCount = 0; function addField() { const container = document.getElementById("fields"); const div = document.createElement("div"); div.innerHTML = ` <input type="text" placeholder="键名" name="key_${fieldCount}"> <input type="text" placeholder="键值" name="value_${fieldCount}"> <select name="type_${fieldCount}"> <option value="string">字符串</option> <option value="number">数字</option> <option value="boolean">布尔值</option> </select> `; container.appendChild(div); fieldCount++; } function generateJSON() { const data = { fields: [] }; for(let i=0; i<fieldCount; i++){ const key = document.querySelector(`[name="key_${i}"]`).value; const value = document.querySelector(`[name="value_${i}"]`).value; const type = document.querySelector(`[name="type_${i}"]`).value; data.fields.push({ key, value, type }); } fetch('/generate', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(data) }).then(response => response.text()) .then(code => document.getElementById("output").innerText = code); } </script> </head> <body> <div id="fields"></div> <button onclick="addField()">添加字段</button> <button onclick="generateJSON()">生成代码</button> <pre id="output"></pre> </body> </html> ``` #### 三、易语言服务端实现 ```vb .版本 2 .支持库 e2ee .程序集 窗口程序集_启动窗口 .程序集变量 服务器, 网站服务器 .子程序 __启动窗口_创建完毕 服务器.创建("127.0.0.1", 8080) 服务器.绑定视图函数("/generate", &生成JSON代码, #视图函数_POST) 服务器.启动() .子程序 生成JSON代码 .参数 请求对象, 请求 .参数 响应对象, 响应 .局部变量 键值表, 存取键值表 .局部变量 原始数据, 文本型 .局部变量 JSON结果, 文本型 原始数据 = 请求对象.取原始数据() 键值表.JSON载入(原始数据, , , ) ' E2EE 2.7.2+支持该语法[^1] ' 创建结构化JSON 键值表.置文本("status", "success") 键值表.置文本("message", "数据生成完成") ' 获取最终JSON代码 JSON结果 = 键值表.JSON(假, , , ) ' 参数说明:是否格式化|缩进字符|换行符 响应对象.写出文本(JSON结果) ``` #### 四、关键技术解析 1. **动态表单处理**:通过JavaScript的`fieldCount`计数器实现无限字段扩展 2. **数据类型转换**:HTML中通过`<select>`菜单指定数据类型,服务端通过存取键值表的`置值类型`方法处理 3. **JSON生成优化**:使用`到JSON()`方法的格式化参数控制输出格式: ```vb 键值表.JSON(真, " ", #换行符_LF) ' 生成带缩进的格式化JSON ``` 4. **错误处理增强**:建议添加异常捕获: ```vb .如果真 (键值表.JSON载入(原始数据) = 假) 响应对象.状态码 = 400 响应对象.写出文本("{""error"":""Invalid JSON format""}") 返回 .如果真结束 ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值