ajax接收后台返回值,并更改前端界面显示内容

html代码

<div style="width: 80%;text-align: center;margin:0 auto;">
        <table id="tt" style="width: 100%; text-align:center;"cellspacing="0" cellpadding="0">
            <tr >
                <th>id</th>
                <th>图书名称</th>
                <th>图书价格</th>
                <th>图书库存</th>
                <th>已售出数量</th>
                <th>已借出数量</th>
            </tr>
        </table>
    </div>

这是固定的顶部样式,我们希望根据我们查询出的结果在下方显示出图书的对应信息
在这里插入图片描述

Js代码

$.ajax({
                type: "post",
                url: "book?action=select",
                data: {},
                dataType: "json",
                contentType: "application/x-www-form-urlencoded; charset=utf-8",//编码格式
                success: function (data) {
                    for (var i in data) {//data为java传过来的数据,我们循环读取并写成代码
                        var tab = '<tr>' +
                            '<td>' + data[i].book_id + '</td>' +
                            '<td>' + data[i].book_name + '</td>' +
                            '<td>' + data[i].book_price + '</td>' +
                            '<td>' + data[i].book_stock + '</td>' +
                            '<td>' + data[i].book_sell + '</td>' +
                            '<td>' + data[i].book_lend + '</td>' +
                            '</tr>';
                        $("#tt").append(tab); //根据table标签的id写入代码,append是在原有代码的结尾追加新的代码
                    }
                }
            })

这是结果界面
在这里插入图片描述
Java代码

List<Book_Bean> Book_List = new ArrayList<Book_Bean>();
Book_List = book.select1(con,book_name);	//将我们的查询结果放入Book_List
PrintWriter pw = response.getWriter();		
String json = JSONArray.fromObject(Book_List).toString();	//将结果转为Json格式
pw.print(json);//通过ajax传给页面

可以访问该网址进行实例测试,点击查询图书即可
https://www.nevergiveu.com/book/index.jsp
在这里插入图片描述
点击查询图书即可进入该页面测试

  • 6
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
配置 Struts2 Ajax 的方式有两种: 1. 通过 Struts2 提供的 `@Result` 注解配置 在 Action 方法上使用 `@Result` 注解,将返回值指定为 JSON 类型,并设置 `params` 参数为 `contentType="application/json;charset=UTF-8"`,示例如下: ``` @Action(value = "ajaxTest", results = { @Result(name = "success", type = "json", params = { "contentType", "application/json;charset=UTF-8" }) }) public String ajaxTest() { // 处理业务逻辑 return "success"; } ``` 2. 在配置文件中配置 在 Struts.xml 中添加如下配置,将返回值指定为 JSON 类型,并设置 `contentType="application/json;charset=UTF-8"`: ``` <package name="ajax" extends="json-default"> <action name="ajaxTest" class="com.example.AjaxAction"> <result type="json"> <param name="contentType">application/json;charset=UTF-8</param> </result> </action> </package> ``` 无论使用哪种方式配置,后台返回值只需要返回一个符合 JSON 格式的字符串即可。可以使用 Struts2 提供的 JSON 插件将 Java 对象转换为 JSON 字符串,示例如下: ``` public class AjaxAction extends ActionSupport { private String message; public String ajaxTest() { // 处理业务逻辑 message = "Hello, Ajax!"; return SUCCESS; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } } ``` 在 Action 类中添加 `message` 属性,并提供对应的 getter 和 setter 方法,然后在 Action 方法中将其赋值为需要返回的字符串。在配置文件或者使用注解时,指定返回类型为 JSON 类型,就可以返回一个 JSON 格式的字符串了。例如: ``` { "message": "Hello, Ajax!" } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值