这个ajax刷新,需要怎么刷新呢?

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

7回答
好帮手慕阿慧 2020-12-21 16:37:48

同学你好,同学的意思是,点击删除时,调用自己写的删除方法吗?如果是,href中应该写javascript:void(0),不进行跳转,再添加点击事件。

参考代码如下:

var content = "";
for(var i = 0; i < json.length; i++){
	var bookList = json[i];
	for(var j = 0; j < json.length; j++){	
		var book = bookList[j];
		content +="<a  href='javascript:void(0)' data-bookId="+book.id+" onclick=delBk(this)>删除~~</a>"
	}
}

http://img1.sycdn.imooc.com//climg/5fe05e2809881abb10370613.jpg

运行结果如下:

http://img1.sycdn.imooc.com//climg/5fe05e8a09ba705516080211.jpg

建议同学回顾一下本次课程,在学习完课程后,再来写作业。

  • 提问者 叶锦辉 #1
    老师,这个方法我试过,不行,点击后没办法执行
    2020-12-21 18:03:56
  • 提问者 叶锦辉 #2

    http://img1.sycdn.imooc.com//climg/5fe07878093fb77919200979.jpg

    2020-12-21 18:27:06
  • 提问者 叶锦辉 #3

    解决了。。

    2020-12-21 18:30:50
好帮手慕阿慧 2020-12-20 11:00:25

同学你好,

1、同学可以在Book类中添加分类名称属性。

参考代码如下:

http://img1.sycdn.imooc.com//climg/5fdeb82009da433204570321.jpg

根据分类id查询图书时,就可以查询出符合分类id的图书了,每个图书都有分类id和分类名称值。

删除图书分类时,发送分类id。参考代码如下:

http://img1.sycdn.imooc.com//climg/5fdeb87709fed7a603850135.jpg

2、同学可以在前端页面中遍历分类集合。当展示的图书的分类id与遍历分类集合中的分类id一样时,展示分类名称。

后端,参考代码如下:

http://img1.sycdn.imooc.com//climg/5fdee8cc09c6b31d09430322.jpg

前端页面,参考代码如下:

http://img1.sycdn.imooc.com//climg/5fdebcb909f5177110880400.jpg

删除图书分类不需要弹窗,同学可以使用ajax请求删除图书分类url,并发送要删除的分类id数据。

参考代码如下:

http://img1.sycdn.imooc.com//climg/5fdebd420990edc805380143.jpg

祝学习愉快~

  • 提问者 叶锦辉 #1

    老师,那个list<list<a>>这个集合,在转成json时,需要怎么获取里面的值?


    2020-12-20 11:23:22
  • 好帮手慕阿慧 回复 提问者 叶锦辉 #2

    同学你好,同学可以转换为json后,先遍历最外层list,通过下标获得List<a>,再遍历List<a>集合,通过下标获得a。

    参考代码如下:

    http://img1.sycdn.imooc.com//climg/5fdef34f091f6daa10330309.jpg

    http://img1.sycdn.imooc.com//climg/5fdef44d097a713e05940337.jpg

    http://img1.sycdn.imooc.com//climg/5fdef486096c387904900098.jpg

    祝学习愉快~

    2020-12-20 14:51:57
  • 提问者 叶锦辉 #3

    但是在ajax中,怎么才能调用删除的jquery方法?

    2020-12-21 14:09:21
好帮手慕阿满 2020-12-19 18:35:56

同学你好,同学的代码图书类中存储的的分类的id吗?这里建议同学可以直接在bookList中显示分类id。或者同学图书Book类中定义分类时,存储分类的名称,而不是id,这样前台显示时,显示就是分类名称,而不是分类id。

祝学习愉快~

  • 提问者 叶锦辉 #1

    因为一般都是根据id进行查询的,所以我才使用id,但是现在改的话,很多都需要修改

    2020-12-19 19:25:45
  • 提问者 叶锦辉 #2

    有什么办法在不修改的情况下也能完成这个ajax显示?


    2020-12-19 19:26:15
  • 提问者 叶锦辉 #3

    而且删除执行的弹窗操作,也是需要ajax,所以在ajax中怎么执行这个删除功能?

    2020-12-19 19:27:09
好帮手慕阿满 2020-12-19 14:44:31

同学你好,参考​如下代码,正常获取分类名称,价格即可,这些在后台查询到的内容,直接在前台展示即可,不需要其他额外的操作。

http://img1.sycdn.imooc.com//climg/5fdda05e09307cae09200418.jpg

增加两个<a>标签,用来展示修改和删除的操作,当点击修改和删除时,跳转并执行相应的方法。

祝学习愉快~

  • 提问者 叶锦辉 #1

    后台分类要怎么包装?


    2020-12-19 15:08:47
  • 提问者 叶锦辉 #2

    因为分类和图书不一样,他是根据图书的分类id进行查询分类名称的

    2020-12-19 15:09:21
  • 好帮手慕阿满 回复 提问者 叶锦辉 #3

    同学你好,问一下同学后台返回的是什么样的数据?需要包装什么?后台查询到对应分类的图书集合后,将其转换为json类型数据,返回给前台展示即可。同学返回的是什么样的数据呢?

    祝学习愉快~

    2020-12-19 17:15:10
好帮手慕阿满 2020-12-19 13:51:55

同学你好,使用Ajax局部刷新只是查询图书信息。查询图书信息后,将其转换为json类型数据,返回给前台。例如:

http://img1.sycdn.imooc.com//climg/5fdd947509960a1e07250334.jpg


在前台,获取json数据,使用for循环获遍历数据,并将其设置给tbody。

http://img1.sycdn.imooc.com//climg/5fdd93fa0990482d08440497.jpg

只是展示数据,不需要使用判断。

祝学习愉快~

  • 提问者 叶锦辉 #1

    //查询提交

    function searchSubmit(){

    var categoryName=$("#searchContent").val();

    $.ajax({

    "url":"/book?method=searchBook",

    "type":"post",

    "data":"categoryName="+categoryName,

    "dataType":"json",

    "success":function(json){

    $("#tr1>td").remove();

    var content="";

    for(var i=0;i<json.length;i++){

    content=content+"<td>"+(i+1)+"</td><td>"

    +json[i].bookId+"</td><td>"+json[i].bookName+"</td><td>"

    +json[i].bookPrice+"</td><td>"+"<img src="+json[i].bookPreview+">"+"</td><td>"

    +"<a href='/book?method=show_updateBook&bookId="

    +json[i].bookId+"'>修改</a>"+"</td><td>"+

    "<a href='javascript:void(0)' data-bookId="+json[i].bookId+"data-bookName="+json[i].bookName+"data-preview="+json[i].bookPreview+"onclick='delBook(this)'"+">删除</a>"+"</td>";

    }

    $("#tr1").html(content);

    }

    })

    }


    2020-12-19 13:54:12
  • 提问者 叶锦辉 #2

    <c:forEach items="${bList }" var="b" varStatus="idx">

    <tr id="tr1">

    <td>${idx.index+1 }</td>

    <td>${b.bookId }</td>

    <td>${b.bookName }</td>

    <c:forEach items="${cList }" var="c">

    <c:if test="${c.categoryId==b.bookCategory }">

    <td>${c.categoryName }</td>

    </c:if>

    </c:forEach>

    <td><fmt:formatNumber pattern="¥0.00"

    value="${b.bookPrice }"></fmt:formatNumber></td>

    <td><img src="${b.bookPreview }"></td>

    <td><a

    href="/book?method=show_updateBook&bookId=${b.bookId }">修改</a> <a

    href="javascript:void(0)" data-bookId=${b.bookId }

    data-bookName=${b.bookName } data-preview=${b.bookPreview }

    onclick="delBook(this)">删除</a></td>

    <!--在循环显示数据时,此处的book0001可以用EL表达式进行替换-->

    </tr>

    </c:forEach>


    2020-12-19 13:54:34
  • 提问者 叶锦辉 #3

    http://img1.sycdn.imooc.com//climg/5fdd95b4090d11bb15080540.jpg分类名称、删除、修改又是怎么实现?还有价格,因为价格是0.00小数位的,这个ajax刷新应该实现不了了 吧

    2020-12-19 13:55:53
好帮手慕阿满 2020-12-18 18:45:20

同学你好,使用Ajax局部刷新,可以参考课程《jQuery与Ajax入门》的教辅《使用Ajax完成新闻查询功能》的案例。

http://img1.sycdn.imooc.com//climg/5fdc870e09b2d6f314460737.jpg

局部刷新,可以在显示内容时,增加两个标签,显示修改和删除的操作。

祝学习愉快~

  • 提问者 叶锦辉 #1

    但是分类那个就很难显示


    2020-12-18 23:52:28
  • 好帮手慕阿满 回复 提问者 叶锦辉 #2

    同学你好,可以显示分类的。同学是在显示分类时有什么问题,可以将问题具体描述一下,并将代码贴上来,方便我们根据问题具体解决。

    祝学习愉快~

    2020-12-19 09:42:49
  • 提问者 叶锦辉 回复 好帮手慕阿满 #3

    分类需要用到分类的数据,所以需要判断,加上json应该不能传两个不同的json吧

    2020-12-19 12:17:47
叶锦辉 提问者 2020-12-18 17:11:12

如果局部刷新了,那个修改和删除的操作就没有了,只有查询出的消息而已


问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师