// 页面加载时获取已选择的应用列表 $.ajax({ url: '/sysCenter/user/applicationList', type: 'get', data: {userId: '', pageNum:'1',pageSize:'50'}, dataType: 'json', success: function(response) { console.log(response,'response.data') if (response.code === 200) { // 渲染已选择的应用列表 var selectedHtml = ''; response.data.list.forEach(function(item, index) { selectedHtml += '<div class="new_list">' + '<button class="delete_button">'+ '×' +'</button>'+ '<button class="edit_button">'+ '编辑' +'</button>' + '<span class="span_name">'+ item.applicationUserName +'</span>' + '</div>'; }); $('.new_yy').append(selectedHtml); } else { console.log('获取已选择的应用列表失败!'); } }, error: function(error) { console.log(error); } });
时间: 2024-02-15 10:28:06 浏览: 19
这段代码是一个通过Ajax请求获取已选择的应用列表,并将结果渲染到页面中的代码。具体来说,代码中:
1. 使用jQuery的Ajax方法发送了一个GET请求,请求的URL为'/sysCenter/user/applicationList'。
2. 请求时传递了三个参数,分别是userId、pageNum和pageSize。这些参数用来指定请求的用户ID和分页信息。
3. 请求成功后,将返回的JSON数据解析后进行处理。如果返回的code为200,则表示获取数据成功,此时将数据渲染到页面中。
4. 如果请求失败或返回的code不是200,则输出错误信息。
总之,这段代码的作用是获取已选择的应用列表并将结果渲染到页面中,以供用户查看和操作。
相关问题
idea中的Javaweb项目实现Mybatis和ajax调用数据库并显示在页面中
以下是一个基于Mybatis和Ajax的JavaWeb项目实现,可以从数据库中获取数据并将其显示在页面中。
1. 首先,需要创建一个数据库表,例如“user”,包含id、name和age字段。
2. 接下来,需要创建一个JavaBean类User,用于将数据库表中的数据映射到Java对象中。
```java
public class User {
private int id;
private String name;
private int age;
// getter and setter
}
```
3. 然后,需要创建一个Mybatis的映射文件UserMapper.xml,用于定义SQL语句以及与JavaBean类的映射关系。
```xml
<mapper namespace="com.example.mapper.UserMapper">
<select id="getAllUsers" resultType="com.example.model.User">
SELECT id, name, age FROM user
</select>
</mapper>
```
4. 接下来,需要创建一个UserDao接口,用于定义数据访问操作。
```java
public interface UserDao {
List<User> getAllUsers();
}
```
5. 然后,需要创建一个UserDaoImpl类,实现UserDao接口,并注入Mybatis的SqlSessionFactory对象。
```java
public class UserDaoImpl implements UserDao {
private SqlSessionFactory sessionFactory;
public void setSessionFactory(SqlSessionFactory sessionFactory) {
this.sessionFactory = sessionFactory;
}
@Override
public List<User> getAllUsers() {
SqlSession session = sessionFactory.openSession();
try {
UserMapper mapper = session.getMapper(UserMapper.class);
return mapper.getAllUsers();
} finally {
session.close();
}
}
}
```
6. 接下来,需要创建一个Servlet类UserServlet,用于处理Ajax请求并调用UserDao获取数据。
```java
public class UserServlet extends HttpServlet {
private UserDao userDao;
public void setUserDao(UserDao userDao) {
this.userDao = userDao;
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<User> userList = userDao.getAllUsers();
Gson gson = new Gson();
String json = gson.toJson(userList);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
}
}
```
7. 最后,需要在页面中使用Ajax调用Servlet并将获取到的数据显示在页面中。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mybatis and Ajax Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url : "user",
type : "GET",
dataType : "json",
success : function(data) {
var table = $("<table></table>").addClass("table");
var header = $("<tr></tr>").append(
$("<th></th>").text("ID"),
$("<th></th>").text("Name"),
$("<th></th>").text("Age")
).appendTo(table);
$.each(data, function(index, user) {
$("<tr></tr>").append(
$("<td></td>").text(user.id),
$("<td></td>").text(user.name),
$("<td></td>").text(user.age)
).appendTo(table);
});
$("#userList").append(table);
}
});
});
</script>
</head>
<body>
<h1>Mybatis and Ajax Example</h1>
<div id="userList"></div>
</body>
</html>
```
以上就是一个基于Mybatis和Ajax的JavaWeb项目实现,可以从数据库中获取数据并将其显示在页面中。
请帮我写一个C# webforms前端使用bootstrap table加ajax调用一般处理程序,从Oracle数据库获取数据,显示一个包含图片的商品列表
好的,以下是一个示例代码:
前端代码(HTML/C# WebForms):
```html
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!-- 引入 Bootstrap 和 jQuery -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- 引入 Bootstrap Table -->
<link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css" rel="stylesheet" />
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
$(function () {
// 初始化表格
$('#table').bootstrapTable({
url: 'GetData.ashx', // 调用一般处理程序获取数据
method: 'post',
queryParams: function (params) {
return {
limit: params.limit, // 每页显示条数
offset: params.offset // 当前页码
}
},
pagination: true, // 开启分页
sidePagination: 'server', // 服务器端分页
pageNumber: 1, // 初始页码
pageSize: 10, // 初始每页显示条数
pageList: [10, 20, 50, 100], // 可选每页显示条数
columns: [
{
field: 'id',
title: '商品ID'
},
{
field: 'name',
title: '商品名称'
},
{
field: 'price',
title: '商品价格'
},
{
field: 'image',
title: '商品图片',
formatter: function (value, row, index) { // 自定义格式化函数
return '<img src="' + value + '" style="max-width: 100%; max-height: 100px;" />';
}
}
]
});
});
</script>
</head>
<body>
<table id="table"></table>
</body>
</html>
```
后端代码(C# 一般处理程序):
```csharp
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Oracle.ManagedDataAccess.Client;
using Newtonsoft.Json;
namespace WebApplication1
{
/// <summary>
/// GetData 的摘要说明
/// </summary>
public class GetData : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
// 获取请求参数
int limit = int.Parse(context.Request.Form["limit"]); // 每页显示条数
int offset = int.Parse(context.Request.Form["offset"]); // 当前页码
// 连接 Oracle 数据库
string connStr = "Data Source=(DESCRIPTION=(ADDRESS_LIST=(ADDRESS=(PROTOCOL=TCP)(HOST=localhost)(PORT=1521)))(CONNECT_DATA=(SERVICE_NAME=ORCL)));User Id=scott;Password=tiger;";
using (OracleConnection conn = new OracleConnection(connStr))
{
conn.Open();
// 查询商品数据
string sql = "SELECT * FROM products ORDER BY id OFFSET :offset ROWS FETCH NEXT :limit ROWS ONLY";
using (OracleCommand cmd = new OracleCommand(sql, conn))
{
cmd.Parameters.Add(new OracleParameter(":offset", offset));
cmd.Parameters.Add(new OracleParameter(":limit", limit));
using (OracleDataReader reader = cmd.ExecuteReader())
{
// 将查询结果转换为 JSON 格式的字符串
List<Dictionary<string, object>> list = new List<Dictionary<string, object>>();
while (reader.Read())
{
Dictionary<string, object> dict = new Dictionary<string, object>();
dict.Add("id", reader.GetInt32(0));
dict.Add("name", reader.GetString(1));
dict.Add("price", reader.GetDecimal(2));
dict.Add("image", reader.GetString(3));
list.Add(dict);
}
string json = JsonConvert.SerializeObject(list);
// 返回 JSON 格式的字符串
context.Response.ContentType = "application/json";
context.Response.Write(json);
}
}
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
```
说明:
1. 前端使用了 Bootstrap 和 jQuery,以及 Bootstrap Table 插件,其中 `#table` 是一个空的 `<table>` 元素,用于显示商品列表。
2. 前端通过 Ajax 调用一般处理程序 `GetData.ashx`,传递了 `limit` 和 `offset` 参数,表示每页显示条数和当前页码。
3. 一般处理程序 `GetData.ashx` 会连接 Oracle 数据库,查询商品数据,并将查询结果转换为 JSON 格式的字符串,最终返回给前端。
4. 前端通过 Bootstrap Table 插件,将 JSON 格式的字符串渲染成表格,并支持分页、排序等功能。其中 `columns` 属性指定了表格的列,其中包含一个自定义的 `formatter` 函数,用于将商品图片显示为图片元素。