首页 > 其他分享 >解决Button Click事件后自动刷新页面问题

解决Button Click事件后自动刷新页面问题

时间:2022-10-30 10:34:10浏览次数:52  
标签:console button 点击 Click json 数据 Button 页面

最近练习老师留下的一个项目,在整合完springboot ,mybatis等框架后将数据返回到前端

返回的数据为String类型

前端是button的 设置的click事件 执行ajax

button

 

运行起来后在前端,点击button后,要显示的值显示不出来而且这时候console要打印的值也没有

进行仔细地观察,重复快速的点击button会隐约能看到要显示的内容但很快消失,判断为数据显示后又刷新了一次页面,导致搜索的数据刷没了

F12测试点击button会进入debugger状态 点击箭头下一步 

console.log才会打印出值,上图中第一个console可以正常输出(String类型),转化为json后,第二个console有显示但是json数据无法展开观看情况如下图

很离谱,经过一天的查阅,终于找到了解决办法

 解决办法:

    

 

   在button按钮中加入type属性,json数据就能显示了

 

原理并不清楚,但是操作蛮离谱的。

 

标签:console,button,点击,Click,json,数据,Button,页面
From: https://www.cnblogs.com/woaixing711/p/16840625.html

相关文章

  • Vue页面重新加载刷新数据配置
    第一种方式reload一、在根文件app.vue文件中配置//app.vue<template><!--给全局挂载适配元素app--><divid="app"><keep-aliveinclude="DataSet">......
  • DatagridView2——绑定数据源,设置列类型为CheckBox,ComboBox,Button,Link
    DatagridView2实现内容:1、绑定数据源2、手动编辑DatagridView属性后并绑定数据源3、设置列类型为CheckBox4、设置列类型为ComboBox5、设置列类型为Button和Link实现......
  • JAVA-JButton 窗口中添加按钮
    packagecom.itheima;importjavax.swing.*;publicclassJFrame03{publicstaticvoidmain(String[]args){JFramejf=newJFrame();jf.s......
  • 用jq替换原本页面中有得onclick点击事件
    <script>//javascript:location.href='/ServiceAction/com.velcro.workflow.workflow.servlet.WfViewAction?workflowid=e4e48163822a84e40182a5c82505186a&viewmode=0&......
  • 自动刷新页面
    voidhandleRoot(){  //处理网站目录“/”的访问请求  esp8266_server.send(200,"text/html",sendHTML(pinState));  } /*建立用于发送给客户端浏览器的HT......
  • 集群部署ClickHouse
    一、部署前提需要一个Zookeeper集群搭建clickhouse集群时,需要使用Zookeeper去实现集群副本之间的同步,所以这里需要zookeeper集群,zookeeper集群安装后可忽略此步骤。......
  • 二维码页面
    js//pages/downloadFile/downloadFile.jsPage({/***页面的初始数据*/data:{a:'0'},onClicksource:function(e){console.log("复制来......
  • 本次练习的相关页面
    主页面浏览界面(将所有功能都放在这个界面了,所以五个界面跳转到的都是一个界面(怪不好意思的))修改界面(有数据回显嗷)删除界面(删除之前会有弹窗提示的)查询界面(实现的是......
  • delphi TMS FlexCel 导出页面设置
    TMSFlexCel导出页面设置属性和方法TFlexCelHtmlExport.HidePrintObjectspropertyHidePrintObjects:SetofTHidePrintObjects选择哪些类型的对象不应该导出。导......
  • react实战笔记95:添加checkout组件2结账页面
     结算页面得制作修改关闭遮罩层功能......