发送ajax请求到后台获取的数据不能显示到弹框<div>中

点击按钮发送ajax请求到后台获取的数据,div能弹出来,但是下面的数据不显示,如下图(块里面为空,无数据,只有表头):
图片说明
在html的标签中的代码:<br> <img src="https://img-ask.csdn.net/upload/201511/23/1448285257_457694.jpg" alt="图片说明"><br> 红框①中的数据都获取到了但是不显示到块中;粉框②是拼接的html,不显示数据的问题估计就出在这里,其他地方元素都显示正常。<br> 我的逻辑是,从服务器取出的数据填进这个div中,但就是不显示。是不是还缺点什么?是异步的问题吗?</p>

7个回答

你在success回调里面return内容无用,没有任何对象接收返回值,而且ajax是异步的,如果你userLive要返回数据,也需要将ajax设置为同步的,async:false

将 return html那句改为$('#light').append(html),往弹出层里面添加内容,如果你的light还有容器,自己注意修改选择器

superit401
ispotu 又出现新问题了,如下图
大约 4 年之前 回复

把return html改为$('#light').append(html)

图片说明(在html的标签中的代码)

断点打印出来有数据没有呢?

控制台有数据(即红框①有数据),但是就是不显示到div中

根据各位老师的提示更改后的问题:图片说明
所做的更改:
①处为添加的异步;
②处为清空table里的内容(但是事实证明此处失效);
③处为拼接的html字符串(此处没有改动)
④处和⑤处为添加的append方法
结果是:如图图片说明
红框里的数据出来了,但是和表头显示的不和谐,似乎不是table,都缩到一块了;
还有个严重的问题就是:多次点击按钮每次获取的信息都会显示到这个div中,但是不将上次的内容清空,一直在append(即②处的$('#liveTa').empty();失效),所以右上角的滑竿一直变短。图片说明
问题怎么解决?

楼主的

用好了吗
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
点击标签,写有Ajax的点击事件无法正确执行,Ajax请求无法发送,qiu'jie?
<div id="pages">&nbsp; <a href="javascript:;" onclick="moremovie()" >更多电影</a> <!--点击增加更多电影--> <script type="text/javascript"> var page=2; function moremovie(){ $.ajax({ url:"http://www.imovie.com/search/title_search?page="+page+"&rows=10&query="+query, dataType:"json", type:"get", success:function(data1){ for(var index = 0 ; index<10; index++){ var data=data1.rows[index]; var html="<li><a id='detail_1_1' href='detail.html?mvId="+data.mvId+"' class='p'><img id='img1' src='"+data.mvImgUrl+"' alt='"+data.mvName+"' /></a><div class='info'> <h2><a id='detail_2_1' href='detail.html?mvId="+data.mvId+"'>"+data.mvName+"</a> / <em id='type1'>"+data.mvTypeId+"</em></h2> <p id='actor1' class='z'><span>主演:</span>"+data.mvActor+"</p> <p id='story1' class='desc'><span>剧情:</span>"+data.mvBrief.substr(1,90)+"<a id='detail_3_1' href='detail.html?mvId="+data.mvId+"' rel='nofollow'>[阅读]</a></p> </div> </li>"; $("#movieList").append(html); } } }); page=page+1; } </script> </div> ``` 想要实现点击更多电影后ajax发送请求到后台读取数据展示。但点击后无法发送qing'qi ```
vue中echarts图无法渲染
我在父组件中定义了一个容器,然后定义了echarts图的基本配置项,在created中调用一个方法,获取后台数据,然后将数据传递到子组件中渲染echarts图,现在数据都能成功传递,但是一直无法成功渲染echarts图 以下为父组件代码 ``` // 父组件代码 <template> <div> <div class="leftChart"> <linegraph :id="'leftChart'" :data="option1" style="height:330px;width:100%"></linegraph> </div> </div> </template> <script> // 引入子组件 import linegraph from "./EchartsShow.vue"; // 引入网络请求方法 import { getSumData } from "@/api/crd/orgLimitView/orgView" export default { data () { return { // echarts图基本配置项,未定义具体数据 option1: { title: { text: '授信额度结构', subtext: '行业维度', x: 'center', top: '3%' }, tooltip: { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: '2%', top: '2%' }, series: [ { name: '行业', type: 'pie', radius: '55%', center: ['50%', '55%'], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }, } }, created () { this.getSum() }, methods: { getSum () { // 调用get请求方法,获取后台数据,由于进度问题,目前只能传递固定的参数,才能获取到测试数据 getSumData('1', '01000').then(res => { if (res.status != 200) { return this.$message.error('获取数据失败,请重试') } const datas = res.data.data // 由于拿到的数据非常复杂繁多,需要进行一些处理,才能拿到需要的数据 this.option1.legend.data = this.tableDatas.map(item => { // 由于后台拿到的数据,都是数字类的码值,this.dicInd[item.industry] 用来翻译后台数据 return this.dicInd[item.industry] }) this.option1.series[0].data = this.tableDatas.map(item => { return { value: item.approveExpAmount, name: this.dicInd[item.industry] } }) console.log(this.option1.legend.data, '行业'); console.log(this.option1.series[0].data, '行业带数据'); }) } }, components: { linegraph } } </script> ``` 以下为子组件代码 ``` // 子组件代码 <template> <div v-bind:id="id" v-bind:data="data"></div> </template> <script> import echarts from "echarts"; export default { name: "echartsShow", data () { return { ChartLineGraph: null }; }, // 深度监听 父组件刚开始没有值,只有图标的配置项 // 父组件ajax请求后改变数据的值,传递过来,图标已生成,监听传过来的值的改变 watch: { data: { deep: true, handler: function (newVal, oldVal) { if (newvalue) { this.drawLineGraph(this.id, newVal) } else { this.drawLineGraph(this.id, oldVal) } } } }, props: ["id", "data"], created() { console.log(this.data, '打印传递过来的图表数据') }, mounted () { this.drawLineGraph(this.id, this.data); console.log(this.id, '打印id值') console.log(this.data, '打印data值') }, methods: { drawLineGraph (id, data) { let _this = this; let myChart = document.getElementById(id); this.ChartLineGraph = echarts.init(myChart); this.ChartLineGraph.setOption(data); window.addEventListener("resize", function () { _this.ChartLineGraph.resize(); }); } }, beforeDestroy () { if (this.ChartLineGraph) { this.ChartLineGraph.clear(); } } }; </script> ``` 从后台获取数据后,成功传递给子组件,但是echarts无法成功渲染 ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578384445_959195.png) ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578384684_683561.png) ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578384616_880352.png) ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578384792_786796.png) 经过多次尝试,我遇到了一个奇怪的问题 ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578385072_241075.png) ![图片说明](https://img-ask.csdn.net/upload/202001/07/1578385147_470918.png) 求各位大佬指点,我的代码哪个地方写错了,如何才能成功渲染echarts
怎么通过选择器,选择到AJAX html添加的页面属性.
需要做一个心跳检测. 一级页面展示的是一个设备分组,通过点击设备相应的分组. 发送AJAX请求查询当前分组下的设备. 然后将查询到的数据通过html写入到页面(html,或者取json解析append添加都可以).这一步完成之后. 我需要在这个页面取到通过html写入页面的每个div框中的id值. 但是由于是异步请求,没有刷新页面, 我的选择器,选不到异步加载的div.请问我怎么才能取到这些异步加载的div中的id值.需要再做一个异步的 心跳检测功能,在当前打开的设备分组下获取当前展示的所有设备的id,传到后台去. ``` ```
echarts动态获取后台数据
一.现在我有JSP页面,页面里面有个div中有一个panel面板,面板种面嵌入的map地图。 ``` <div class="panel panel-default"> <div class="panel-heading"><h3 class="panel-title"><i class="fa fa-bar-chart-o fa-fw"></i>中国地图 </h3></div> <div class="panel-body"> <div style="mini-width:400px;height:350px" data-toggle="echarts" data-type="map" data-url="pop/echarts-mapData.html"></div> </div> </div> </div> ``` 二。其中,data-url="pop/echarts-mapData.html",引入的是一个外部html页面,但是里面是死数据,并且是JSON格式的数据。代码如下: ``` { "tooltip": { "trigger": "item" }, "setTheme": { "theme": "macarons" }, "legend": { "orient": "vertical", "x": "left", "data": [ "党员人数" ] }, "dataRange": { "min": 0, "max": 300, "x": "left", "y": "bottom", "text": [ "高", "低" ], "calculable": true }, "toolbox": { "show": true, "orient": "vertical", "x": "right", "y": "center", "feature": { "mark": { "show": true }, "dataView": { "show": true, "readOnly": false }, "restore": { "show": true }, "saveAsImage": { "show": true } } }, "series": [ { "name": "党员人数", "type": "map", "mapType": "重庆|江北区", "roam": false, "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [ { "name": "江北区", "value": 299 } ] } ] } ``` 三。很明显,↑↑↑↑↑↑上面的代码直接就是地图里面的各种参数(虽然数据是死的)。 图片效果如下: ![图片说明](https://img-ask.csdn.net/upload/201711/08/1510132266_325728.png) 问题: echarts的官网我也逛过多次了,但是例子都是新建的一个html网页,在里面加入的js代码,并配合ajax请求获取的后台数据。但是这样的话,加载出来的地图却是一个单独的html网页效果而已,并不能达到我嵌入JSP页面的div中这样的效果。 所以,请教各位能伸出援手,帮帮忙。---我的目的就是想,不要单独的一个html页面,而是就像上面的死数据一样,嵌入在JSP页面中,只是数据变为从后台获取而已。
使用jq的ajax 后台php在谷歌无法获取ajax传来的post值(谷歌显示未定义) 在火狐可以获取到
# 我搞了几天 依旧无法在谷歌获取ajax传来的值,时不时有这个报错 ![图片说明](https://img-ask.csdn.net/upload/201904/12/1555070062_904000.png) # js部分 ``` var name2=$("#name2").val(); var textarea=$("#textarea_liuyan").val(); $.ajax({ //请求方式 type:'POST', //发送请求的地址 url:'http://192.168.0.100:85/php/liuyan.php', //服务器返回的数据类型 contentType:"application/x-www-form-urlencoded", data:{ "name":name2, "tel":textarea }, success:function(data){ alert(name2); console.log(data); console.log(typeof data); console.log(XMLHttpRequest.readyState); }, error:function(data){ alert("down"); console.log (data); console.log (typeof textarea); } }); ``` # php部分 ``` <?php header('Access-Control-Allow-Origin:*'); define('DB_HOST', 'localhost'); define('DB_USER', 'root'); define('DB_PASS', '1234'); define('DB_NAME', 'dengluzhuce'); $dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASS, DB_NAME); echo ($_POST['name']); ?> ``` # html部分 ``` <section class="liuyan" > <div class="wrap"> <div class="wrap-head"> <div class="head-logo"> <img src="image/019.png" /> </div> <div class="head-txt"> <a class="title-txt" href="javascript:void(0)">置办年货省省省!红包在手年货无忧!点击领取年货红包&nbsp;&nbsp;&nbsp;热门微博</a> </div> </div> <div class="main-txt"> <textarea id="textarea_liuyan" class="textarea_liuyan" name="textarea_liuyan5" rows="" cols="" ></textarea> </div> <div class="warp-footer"> <div class="warp-icon-cont"> <ul> <li><img src="img/wb1.png" alt="" /> <a href="javascript:void(0)">表情</a> </li> <li><img src="img/wb2.png" alt="" /> <a href="javascript:void(0)">图片</a> </li> <li><img src="img/wb3.png" alt="" /> <a href="javascript:void(0)">视频</a> </li> <li><img src="img/wb4.png" alt="" /> <a href="javascript:void(0)">话题</a> </li> <li><img src="img/wb5.png" alt="" /> <a href="javascript:void(0)">文章</a> </li> <p style="float:right">姓名<input type="text" id="name2" name="name2"></input></p> </ul> </div> <div class="warp-footer-btns"> <div class="release-btn"> <a href="javascript:void(0)"> 发布 </a> </div> </div> </div> </div> <!-- 显示留言的主体 --> <div class="show"> <!-- <div class="show-content"> <div class="show-name">Xx</div> <div class="show-txt"> <p class="">这是内容</p> </div> <div class="show-time">2018年10月24日</div> <div class="show-close">x</div> </div> --> </div> </section> ```
我想点击查询的时候同时让table框和总次数的内容都根据时间而改变,现在是只有table框变,帮忙给看看,谢谢啦
![图片说明](https://img-ask.csdn.net/upload/201912/03/1575363172_93764.png) ``` <form class="form-horizontal" role="form" style="padding-top:80px;" method="post"> <div class="form-group"> <div class="col-sm-offset-1 col-sm-10"> <label for="startDate" class="control-label">请输入日期:</label> <input type="text" id="logsTime" /> <input type="button" onclick="submitForm()" value="查询"/> </div> </div> <div class="form-group"> <div class="col-sm-offset-1 col-sm-10"> <div id="clickMarkAll"></div> <table id="list" ></table> </div> </div> </form> <script type="text/javascript"> $(function(){ loadList("2019-01-01 00:00"); }) function loadList(startDate) { startDate=$("#logsTime").val(); $("#list").bootstrapTable('destroy'); // 在初始化table之前,要将table销毁,否则会保留上次加载的内容 $('#list').bootstrapTable({ method : 'post', // 请求方式(*) url : '/selectClickMark?logsTime='+startDate, // 请求后台的URL(*) striped : true, // 是否显示行间隔色 cache : false, // 是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) showColumns: true, showExport: true, exportDataType: "all", pageSize:10, pagination: true, //是否显示分页(*) showFooter:true, showColumns : true, // 是否显示所有的列 minimumCountColumns : 1, // 最少允许的列数 columns : [ { title : '玩家id', field : 'userId', },{ title : '问号被点击次数', field : 'clickMark', }] }); } $(function(startDate){ startDate=$("#logsTime").val(); $.ajax({ url:'/clickMarkAll?logsTime='+startDate, type:'get', dataType:'json', success:function(data){ for(i in data) { var h; h=data[i] $("#clickMarkAll").append('<h5 style="color:red;"><a onclick="submitTwo('+startDate+')">总次数:'+h+'</a></h5>') } } }); }) </script> </body> ```
利用ajax动态的提取mysql中的数据,并且在前端页面中展示出来
代码如下: 前端html: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <!--<script type="text/javascript" src="jquery.js"></script>--> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <body> <div id="main" style="width: 600px;height:400px;"></div> </body> </html> <script> var app = { xvalue: [], yvalue: [], z:[], }; // 发送ajax请求,从后台获取json数据 $(document).ready(function () { getData(); console.log(app.value1); console.log(app.timepoint) console.log(app.predictvalue1) }); function getData() { $.ajax({ url: '/test', data: {}, type: 'POST', async: false, dataType: 'json', success: function (data) { app.value1 = data.value1; app.predictvalue1=data.predictvalue1; value1 = app.value1; predictvalue1=app.predictvalue1; function trueData(i) { now = new Date(+now + oneDay); value = value1[i]; return { name: now.toString(), value: [ [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'), Math.round(value) ] } } function predictData(i) { now1 = new Date(+now1 + oneDay); predictvalue = predictvalue1[i]; return { name: now1.toString(), value: [ [now1.getFullYear(), now1.getMonth() + 1, now1.getDate()].join('/'), Math.round(predictvalue) ] } } var data = []; var predictdata=[]; var now = +new Date(1997, 9, 3); var now1 = +new Date(1997, 9, 4); var oneDay = 24 * 3600 * 1000; for (var i = 0; i < value1.length; i++) { data.push(trueData(i)); } for (var i = 0; i < predictvalue1.length; i++) { predictdata.push(predictData(i)); } // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); option = { title: { text: '动态数据 + 时间坐标轴' }, tooltip: { trigger: 'axis', formatter: function (params) { params = params[0]; var date = new Date(params.name); return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1]; }, axisPointer: { animation: false } }, xAxis: { type: 'time', splitLine: { show: false } }, yAxis: { type: 'value', boundaryGap: [0, '100%'], splitLine: { show: false } }, series: [{ name: '真实数据', type: 'line', showSymbol: false, hoverAnimation: false, data: [], markLine: { itemStyle: { normal: { borderWidth: 1, lineStyle: { type: "dash", color: 'red', width: 2 }, show: true, color: '#4c5336' } }, data: [{ yAxis: 900 }] } }, { name: '预测数据', type: 'line', showSymbol: false, hoverAnimation: false, data: [], markLine: { itemStyle: { normal: { borderWidth: 1, lineStyle: { type: "dash", color: 'blue', width: 2 }, show: true, color: '#4c5336' } }, data: [{ yAxis: 900 }] } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); setInterval(function () { for (var i = 0; i < 1; i++) { data.shift(); data.push(trueData(i)); } for (var i = 0; i < 1; i++) { predictdata.shift(); predictdata.push(predictData(i)); } myChart.setOption({ series: [{ data: data }, { data: predictdata }] }); }, 1000); } }) } </script> </body> </html> ``` 后端py,用的是flask框架: ``` import MySQLdb from flask import Flask, render_template, url_for import pymysql import pandas as pd import numpy as np from pandas import read_csv import matplotlib.pyplot as plt from sklearn.preprocessing import MinMaxScaler from sklearn.metrics import mean_squared_error from keras.models import Sequential from keras.layers import LSTM, Dense, Activation,Dropout import json import operator from functools import reduce import math import tensorflow as tf from keras import initializers import time # 生成Flask实例 app = Flask(__name__) @app.route("/") def hello(): return render_template('new_file.html') # /test路由 接收前端的Ajax请求 @app.route('/test', methods=['POST']) def my_echart(): # 连接数据库 conn = MySQLdb.connect(host='127.0.0.1', port=3306, user='root', passwd='123456', db='test', charset='utf8') cur = conn.cursor() sql = 'SELECT timepoint,value1 from timeseries' cur.execute(sql) u = cur.fetchall() timepoint = [] value1 = [] for data in u: value1.append(data[1]) timepoint.append(data[0]) print(value1) # 转换成json格式 jsonData = {} jsonData['value1'] = value1 jsonData['timepoint']=timepoint # json.dumps()用于将dict类型的数据转换成str,因为如果直接将dict类型的数据写入json会报错,因此将数据写入时需要用到此函数 j = json.dumps(jsonData) cur.close() conn.close() # 在浏览器上渲染my_template.html模板(为了查看输出数据) return (j) if __name__ == '__main__': app.run(debug=True,port='5000') ``` 返回的数据是从mysql中读取的,现在我想用ajax的方法定时请求数据库的下一个数据到达前台,并且刷新页面显示出来,应该怎么修改代码? 数据库如下: ![图片说明](https://img-ask.csdn.net/upload/201905/24/1558685991_221903.jpg)
用ajax实现页面某个标签刷新
我用ajax向java后台发送一个请求后,,得到了用户的昵称,并存到了session中 前台举个例子是这样的: ``` \<div id="user">昵称:{sessionScope.userName} \</div> ``` 我不想通过js修改#user的文本内容来显示昵称。。我想通过刷新#user这个div来显示出昵称,,请问我该怎么办?
js获取后台返回的ajax数据 , 是Integer集合 , 现在想遍历这个data
1 . 后台返回了 一个 List<Integer>list 集合给前台ajax ; 2 . 前台页面显示console.log(data) 格式为 [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0] , 其中'0' 有可能是1 , 就是集合里面只会是0 或者 1 3 . 现在想获取每一个数字的下标 , 下面是js的ajax请求 , allStatus 是点击全选复选框后 , 所有value 的 数组 ``` /* 点击全选复选框时触发的事件 */ $('#checkall').on("click", function() { var url = $(this).parents('li').find('img'); $('input[name="station_name"]').each(function() { $(this).prop("checked", true); }) console.log(this) $('input[name="station_name"]:checked').each(function(i) { if (this.checked) { allStatus[i] = this.value; } }); console.log(allStatus) $.ajax({ data : { 'allStatus' : allStatus }, type : "get", url : "/PaStation/getAllStatus", dataType : "text", traditional : true, success : function(data) { arr = data console.log(arr) /*if (data == 1) { url.attr('src', '../images/pademo_green.png'); } else { url.attr('src', '../images/pademo_blue.png'); }*/ } }) //url.attr('src', '../images/pademo_green.png'); }); ``` 4 . 现在想根据 , 0 或者 1 , 给每个复选框展示不同的图片 , 也就是 Green 或者 blue , 因为对js 实在不熟悉 , 卡了 很久 , 希望有前端大佬可以帮助我这个菜鸟 5 . 感谢大家的帮助 , 有什么对问题不清晰的地方可以留言 , 我详细说明一下 , 再次提前感谢各位大佬的帮助 谢谢 问题补充 : 下面是复选框内容的代码片段 ``` <div class="box"> <ul class="box-list clearfix"> <li> <div class="index">01</div> <div class="img"><img src="../static/images/pademo_grey.png" th:src="@{/images/pademo_grey.png}" alt=""></div> <label><input type="checkbox" name="station_name" id="1" value="1" />七莘路</label> </li> <li> <div class="index">02</div> <div class="img"><img src="../static/images/pademo_grey.png" th:src="@{/images/pademo_grey.png}"></div> <label><input type="checkbox" name="station_name" id="2" value="2" />虹莘路</label> </li> ```
ajax向aspx后台请求时返回的数据怎么连前台的代码一块返回
前台代码: $(function myfunction() { $.ajax({ type: "Post", url: "WebForm1.aspx", data: { aaaa:1,bbbb:2 }, dataType: "text", success: function (data) { alert(data); } }); }); 后台: protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { var aaa = Request["aaaa"]; var bbb = Request["bbbb"]; //Response.End(); Response.Write(aaa + bbb); } } 结果: 12 <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title> <script src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(function myfunction() { $.ajax({ type: "Post", url: "WebForm1.aspx", data: { aaaa:1,bbbb:2 }, dataType: "text", success: function (data) { $("#txt1").val(data); alert(data); } }); }); </script></head><body> <form method="post" action="./WebForm1.aspx" id="form1"><div class="aspNetHidden"><input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="PXGntMhDLvKIfR78Lo4ZTiLH+YRHlxQBtKts3lMiSVzRTCMJHg25UPMVz/CXnn6yxDKMDshxP3lT3e8C6ua0rG3owcUyY8o2/pEZC/0GcGA=" /></div><div class="aspNetHidden"> <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="B6E7D48B" /></div> <div> <input type="text" id="txt1"/> </div> </form></body></html>
jquery中存取数据,和在html中输出其中一个,有那些属性方法啊 ?
## 纯html工程,用ajax请求java后台 接口来展示数据,跨域问题已解决,但是这个后台返回的数据中其中一些数据需要临时存储,用jquery那些方法属性可以呢?我还要把其中的一条用户名来打印到html的一个div的span标签中 ,怎么破?
急求使用jquery提交的请求回调函数接收不到后台返回值解决办法
$.ajax({ type: "post", url: uri, async:true, data: data, success: function (result) { $("#showrecord").append(result); }, error:function(XMLResponse){ alert("wait a minute"); } }); 后台: HttpServletResponse res=ServletActionContext.getResponse(); PrintWriter out = res.getWriter(); StringBuffer data = new StringBuffer(); data.append("<table class='table table-bordered table-striped'>"); data.append("<thead>"); data.append("<tr>"); data.append("<th colspan='10'>用户列表</th>"); data.append("</tr>"); data.append("<tr>"); data.append("<th>#</th>"); data.append("<th>用户名</th>"); data.append("<th>昵称</th>"); data.append("<th>密码</th>"); for(int i=0;i<recordList.size();i++){ data.append("<tr>"); data.append("<td>"+sequenceNums.get(i)+"</td>"); data.append("<td>"+recordList.get(i).getTime()+"</td>"); data.append("<td>"+recordList.get(i).getAddress()+"</td>"); } data.append("</tbody>"); data.append("</table>"); String str=new String(data.toString().getBytes("UTF-8"),"UTF-8"); out.print(str); out.flush(); out.close(); 理想效果是在页面输入查询条件后,点击按钮后在按钮下方的div层里显示后台返回的数据,现在点击按钮后,后台接收到了请求,但是页面原有的查询框和按钮不见了,出现一个只显示后台out.print(data);的数据的页面,还是乱码的,显示之前jquery的error:function(){}执行了,求大神分析哪里出了问题
后台接收不到页面ajax请求,报500错误,麻烦帮我看下html和js写的有错吗
text.html ``` <!doctype html> <html> <head> <meta charset="utf-8"> <title>回收物列表</title> <link rel="stylesheet" href="styles/text.css"/> <script type="text/javascript"src="scripts/jquery.min.js"></script> <script type="text/javascript"src="scripts/text.js"></script> </head> <body> <div> <form> <div> <label>请输入回收物种类</label> <select name="selectId" id="selectId"> <option value="%">全部回收物</option> <option value="金属回收物">金属回收物</option> <option value="塑料回收物">塑料回收物</option> <option value="玻璃回收物">玻璃回收物</option> <option value="纸张回收物">纸张回收物</option> <option value="厨余垃圾">厨余垃圾</option> <option value="其他垃圾">其他垃圾</option> </select> </div> <div> <input type="button" value="查询" id="btSearch"/> </div> <br> <br> </form> <div> <table id="table-result"> <thead> <tr> <th>checktype_id</th> <th>cid</th> <th>tchek</th> <th>content</th> <th>cvalue</th> <th>ctype</th> <th>cname</th> <th>smstemplate</th> <th>remark</th> </tr> </thead> <tbody id="tbody-result"> </tbody> </table> </div> </div> </body> </html> text.js页面 $(function(){ $('#btSearch').click(function(){ var selectId=$('#selectId').val(); var tbody=window.document.getElementById("tbody-result"); console.log(selectId); $ajax({ type:"post", dataType:"json", url:"http://localhost:8080/work/checktype/check.do", data:{ selectId:selectId }, success:function(msg){ if(msg.ret){ var str=""; var data=msg.data; for(i in data){ str +="<tr>" + "<td>" + data[i].checktype_id + "</td>" + "<td>" + data[i].cid + "</td>" + "<td>" + data[i].tchek + "</td>" + "<td>" + data[i].content + "</td>" + "<td>" + data[i].cvalue + "</td>" + "<td>" + data[i].ctype + "</td>" + "<td>" + data[i].cname + "</td>" + "<td>" + data[i].smstemplate + "</td>" + "<td>" + data[i].remark + "</td>" + "</tr>"; } tbody.innerHTML = str; } }, error: function(){ alert("查询失败") } }); }); }); ```
jquery ajax前台通过json格式往后台传数据 后台对象接到的老是null
<div class="iteye-blog-content-contain" style="font-size: 14px;"> <p>前台的 静态json数据</p> <p>var resContactInfos1 = [{ </p> <p>metadataId: '001',</p> <p>orgCode:'001',</p> <p>orgName: 'zhangsan', </p> <p>address: '20', </p> <p>            email: 'shanghai' </p> <p>        }, </p> <p>        { </p> <p>        metadataId: '002', </p> <p>        orgCode: '002', </p> <p>        orgName: 'beijing', </p> <p>        address: '21', </p> <p>        email: 'beijing' </p> <p>        } </p> <p>        ]; </p> <p>ajax 请求 </p> <p>var data1={resContactInfo:resContactInfos1};</p> <p>$.ajax({</p> <p>          url: "rc/resourceCatalogManagerAction!saveResource.action", //后台处理的地址</p> <p>          type: "POST",</p> <p>          contentType: "application/json",</p> <p>          data: JSON.stringify(data1),</p> <p>          success:function(){</p> <p>         alert("success");</p> <p>          }</p> <p>});</p> <p> 后台action</p> <p>private list&lt;ResContactInfo&gt;resContactInfo;</p> <p>后台有个resContactInfo属性 它的get set方法也写了 </p> <p>ResContactInfo这个类的属性为 metadataId 、orgCode等 同上面的json对象中的5个属性</p> <p> </p> <p>问题  :我看到浏览器发的请求 感觉是没有问题的  但是后台显示接不到值  求解???</p> <p style="font-size: 14px; line-height: 21px;"> </p> <p> </p> <p> </p> <p> </p> </div>
java前后台数据请求返回问题
![图片说明](https://img-ask.csdn.net/upload/201804/06/1522981331_665869.png)![![图片说明](https://img-ask.csdn.net/upload/201804/06/1522981219_852743.png)图片说明](https://img-ask.csdn.net/upload/201804/06/1522981210_225916.png)将后台list数据转化成jsonarray返回前台,前台访问list中元素的属性显示在下拉框中,执行只输出System.out.println("getDataset.java中2");哪里有问题? 后台.java代码 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // TODO Auto-generated method stub String test_name = request.getParameter("testname"); System.out.println("test_name: "+test_name); DBController con = new DBController(test_name); //查找list System.out.println("进入前"); List<DocumentBean> list = con.select(test_name); System.out.println("getDataset.java中"); System.out.println("list:"+list.get(0).getDatasetPath()); System.out.println("getDataset.java中2"); JSONArray list1=JSONArray.fromObject(list); System.out.println("getDataset.java中3"); response.setCharacterEncoding("UTF-8");//解决显示中文乱码问题 PrintWriter writer = response.getWriter(); writer.write(list1.toString()); writer.flush(); System.out.println("list:"+list.get(0).getId()); } 前台.jsp代码 <div class="form-group" id="select_now"> <label class="col-xs-3 control-label">选择已有数据集</label> <div class="col-xs-3"> <select class="form-control" name="select_dataset" id="select_dataset" onclick="getdatasets();"> </select> </div> </div> function getdatasets(){ $.ajax({ type : "POST", url:"<%=contextPath%>/getDatasets", data : { type : "0", testname : "自动分类", }, dataType : "text", async : false, context : null, success : function(list) { alert(typeof list); alert("成功1"); //下拉菜单选项显示数据库名,值为数据库的真实地址 $("#select_dataset").html(''); //alert("成功2"); for(var i = 0; i<list.length; i++){ var inner = ""; //alert("成功3"); inner += "<option value='" + list.get(i).getDatasetPath() +"'>" + list.get(i).getDataset() + "</option>"; $("#select_dataset").append(inner); } list=[]; alert("成功5"); } }) }
ssm 框架已经实现,但是ajax返回验证有毛病
``` <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>js+ajax</title> <script type="text/javascript" src="static/bootstrap/js/jquery-2.0.3.js"></script> <script type="text/javascript"> function validate(){ var name= $("#name").val(); if(name==null||name==""){ //为空隐藏提交按钮 var ui =document.getElementById("tijiao"); ui.style.display="none"; //这里是简单的显示 不设计后台,前台做的判断 $("#namediv").html("用户名不可以为空"); }else{ //ajax实现 //11111111获取XMLhtmlRequestxml对象 var req=createXmlHttpRequest(); //222222222准备url 数据 回调函数 //这个name是function下面var的参数. var url="/maven/reg1.do?name="+name; //还有一个参数表示的是异步还是同步,一般不写直接就是true,异步的 req.open("GET",url,true); //3333333333这个就是回调函数 req.onreadystatechange=callback; //这个send是在从servlet判断你的账号是不是存在, 如果是true就说名字存在,给页面返回了以后才有的.为啥写空不知道 //4发送请求 req.send(null); //回调函数 function callback(){ //第一个是我们的服务器成功接受了响应,并且解释了出来,状态4 第二个是服务器内部没有发生错误, url什么的也没有错, if(req.readyState=4&&req.status==200){ var date=req.responseText; if(date=="false"){ //下面的是意思是,如果账号存在了,提交按钮自动消失 //超级叼 var ui =document.getElementById("tijiao"); ui.style.display="none"; $("#namediv").html("用户名已经存在"); }else{ //不为空了,按钮一直显示 var ui =document.getElementById("tijiao"); ui.style.display=""; $("#namediv").html("用户名可以使用"); } } } } } function createXmlHttpRequest(){ //如果是ie6以上版本的浏览器 if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else{ //如果浏览器是ie以下的 return new ActiveXObject("Microsoft.XMLHTTP"); } } </script> </head> <body> <form action="/maven/reg1.do" id="form1"> <table id="aa"> <tr> <td>用户名</td> <td><input type="text" name="username" id="name" onblur="validate();" />&nbsp;<font color="red">*</font></td> <td> <div id="namediv" style="display: inline"></div> </td> <td>密码</td> <td><input type="password" name="password"></td> <td>电话</td> <td><input type="text" name="phone"></td> <td><input type="submit" value="点击注册" id="tijiao"></td> </tr> </table> </form> </body> </html> ``` ``` ``` ``` package com.gray.user.controller; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.HttpRequest; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestParam; import com.gray.user.entity.RegUser; import com.gray.user.service.impl.RegServiceImpl; import com.gray.user.service.impl.UserServiceImpl; @Controller public class RegController { @Autowired private RegServiceImpl userService; //自动装载他到spring @RequestMapping("/reg1.do") //url public String dologin(Model model,HttpServletResponse res,@RequestParam String username,RegUser rg,HttpServletResponse response) throws IOException{ boolean used=false; System.out.println("测试参数获取到bean没有"+rg.getUsername()+rg.getPassword()+rg.getPhone()); rg.setUsername(username); if(userService.doUserLogin(rg)){ used=true; System.out.println("通过control到--->service---到dao---到usermapp.在返回回来,service里面是ture,就是说账号不重复"); }else{ used=false; System.out.println("通过control到--->service---到dao---到usermapp.在返回回来,service里面是false,重复了账号 "); } return "regsuccess"; } } ``` ``` package com.gray.user.service.impl; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.gray.user.dao.UserDao; import com.gray.user.entity.RegUser; import com.gray.user.entity.User; import com.gray.user.service.RegService; import com.gray.user.service.UserService; @Service public class RegServiceImpl implements RegService { @Autowired private UserDao<RegUser> dao; @Override public boolean doUserLogin(RegUser ruser) { //第一次执行查询数据库,查询 userdao selectUserName方法。 他这个方法和user.xml里面的id为selectUserName串联了. //也就是直接调用查询语句,并且吧值返回给reguser 类 System.out.println("testRegServiceImpl------->查询数据库,查询语句为id是selectusername"); List<RegUser> list = dao.selectUserName(ruser.getUsername()); System.out.println("查到了集合大小是"+list.size()+"查到了和你账号相同是的是几个"); if(list.size() == 0){ System.out.println("RegServiceImpl---你没有查询到你账号和数据库相同的信息.所以你return,"); for(int i=0;i<list.size();i++){ System.out.println(list.get(i).getUsername()); } return true; }else{ if(list.size()!=0){ System.out.println("regServiceImpl---查询到和你相同的账号不是0个,返回false"); return false; }else{ System.out.println("regserviceImpl----其他情况我也不知道啥情况,也返回false"); return false; } } } } ``` ``` 页面上的ajax 他就一直出毛病,数据库有个账号名是aa 只有我在表单填写aa 他才在网页提示账号重复, 别的任何都不提示,只会提示不能为空, 而且还失灵时不灵。 但是用system. 输出 我写的任何判断都是对了, 这是为啥? 请求大神给我说下,最好说下哪里错了。谢谢了
js变量怎么不能自增一
var i不能自增是咋回事? ``` function getdata(){ var i = 0; $.ajax({ type: 'POST', // 这是请求的方式 可以是GET方式也可以是POST方式, 默认是GET url: ' /e/ajax2.php ', // 这是请求的连接地址 一般情况下这个地址是后台给前端的一个连接,直接写就可以 dataType: 'json', // 这是后台返回的数据类型 一般情况下都是一个json数据, 前端遍历一下就OK async: true, // 默认为true,默认为true时,所有请求均为异步请求,如果需要发送同步请求,需设置为false, timeout: 8000, // 设置请求超时时间(毫秒)。此设置将覆盖全局设置 data: { page: i , // 要传递的参数 }, beforeSend: function () { // 在发送请求前就开始执行 (一般用来显示loading图) }, success: function (data) { if(data){ var str = ""; for(var key in data){ var str = '<ul class="arrow_box">'; var str = str +'<div class="sy"><p>'; var str = str + '<img src="'+data[key]['titlepic']+'" alt="'+data[key]['title']+'" title="'+data[key]['title']+'" />'+data[key]['smalltext']+''; var str = str + '<span class="dateview">'+data[key]['newspath']+'</span>'; var str = str + '</p></div>'; var str = str + '</ul>'; $(".bloglist").append(str); } i++; alert(i); } // 发送请求成功后开始执行,data是请求成功后,返回的数据 }, complete: function () { //当请求完成后开始执行,无论成功或是失败都会执行 (一般用来隐藏loading图) }, error: function (xhr, textStatus, errorThrown) { // 请求失败后就开始执行,请求超时后,在这里执行请求超时后要执行的函数 } }) } </script> ```
为什么点击按钮保存表单里的数据时,全部的数据都没有获取到,都是空的?
通过jQuert Ajax的POST请求将表单序列化,然后提交到后台时,所有数据都为空的是怎么回事? 这是大致的代码 ``` <html> <head> .... </head> <body> <div> <form id="nq_data"> <div class="col-md-6 form-group"> <label for="name">编号</label> <input type="text" class="form-control" id="openbeds_numbers" placeholder="0"> </div> <div class="col-md-6 form-group"> <label for="name">数目</label> <input type="text" class="form-control" id="pnurse_begin_totalnumbers" placeholder="0"> </div> </form> </div> <div class="col-md-12 form-group"> <button style="width: 150px" type="button" class="btn btn-default" onclick="savaData()">暂存</button> </div> <script type="text/javascript"> function savaData() { $.post("<%=basePath%>savaData.action", $("nq_data").serialize(),function(data){ if(data == "OK"){ alert("已成功保存!"); window.location.reload(); }else{ alert("保存失败!"); window.location.reload(); } }); } </script> </body> ```
bootstraptable-edit使用问题
![图片说明](https://img-ask.csdn.net/upload/201908/06/1565077495_685813.png) 外部的表格无法获取数据,检查contentType属性配置问题。 ``` $(function() { //初始化Table var oTable = new TableInit(); oTable.Init(); }); var TableInit = function() { var oTableInit = new Object(); //初始化Table oTableInit.Init = function() { $('#table').bootstrapTable({ url : 'list',//请求后台的URL(*) method : 'post',//请求方式(*) toolbar : '#toolbar',//工具按钮用哪个容器 striped : true,//是否显示行间隔色 cache : false,//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination : true,//是否显示分页(*) sortable : false,//是否启用排序 sortOrder : "asc",//排序方式 queryParams : oTableInit.queryParams,//传递参数(*) sidePagination : "server",//分页方式:client客户端分页,server服务端分页(*) pageNumber : 1,//初始化加载第一页,默认第一页 pageSize : 10,//每页的记录行数(*) pageList : [ 10, 25, 50, 100 ],//可供选择的每页的行数(*) search : true,//是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 contentType : "application/x-www-form-urlencoded", strictSearch : true, showColumns : true,//是否显示所有的列 showRefresh : true,//是否显示刷新按钮 minimumCountColumns : 2,//最少允许的列数 clickToSelect : true,//是否启用点击选中行 height : 700,//行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 uniqueId : "id",//每一行的唯一标识,一般为主键列 showToggle : true,//是否显示详细视图和列表视图的切换按钮 cardView : false,//是否显示详细视图 detailView : false,//是否显示父子表 columns : [ { field : 'id', title : '编号' }, { field : 'name', title : '名字' }, { field : 'price', title : '价格' }, { field : 'operate', title : '操作', formatter : operateFormatter //自定义方法,添加操作按钮 }, ], rowStyle : function(row, index) { var classesArr = [ 'white', 'lightblue' ]; var strclass = ""; if (index % 2 === 0) {//偶数行 strclass = classesArr[0]; } else {//奇数行 strclass = classesArr[1]; } return { classes : strclass }; },//隔行变色 }); }; //得到查询的参数 oTableInit.queryParams = function(params) { var temp = {//这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的 limit : params.limit,//页面大小 //pageNumber: params.pageNumber,//页码 offset : params.offset }; return temp; }; return oTableInit; }; function operateFormatter(value, row, index) {//赋予的参数 return [ '<a href="#" style="color:blue;" οnclick="edit(' + row.id + ')">编辑</a>|', '<a href="#" style="color:red;" οnclick="del(' + row.id + ')">删除</a>', ].join(''); } ``` table-edit.js ``` (function($){ 'use strict'; $.extend($.fn.bootstrapTable.defaults, { editable: false }); var BootstrapTable = $.fn.bootstrapTable.Constructor, _init = BootstrapTable.prototype.init, _initBody = BootstrapTable.prototype.initBody, _onSort = BootstrapTable.prototype.onSort, _append = BootstrapTable.prototype.append, _initHeader = BootstrapTable.prototype.initHeader ; //添加编辑表格默认属性,如何edit设置为false时,表示该列不可编辑 $.extend(true,BootstrapTable.COLUMN_DEFAULTS,{ edit:{ type:'text'//目前只支持 文本:text 下拉:select 日期:date } }); BootstrapTable.prototype.init = function () { _init.apply(this, Array.prototype.slice.apply(arguments)); var that = this; that.prevEditRow = null;//上一次编辑的行 that.columns = {};//列配置信息 that.insertRowVal = {};//新插入行的默认值 that.enableAppend = true;//允许添加新行 if (that.options.editable) { var columnObj = this['getColumns'](); $.each(columnObj,function(i,obj){ $.each(obj,function(z,col){ if(!isNaN(col.fieldIndex) && col.fieldIndex >= 0){ if(col.checkbox)col.edit = false; that.columns['column'+col.fieldIndex] = col; that.insertRowVal[col.field] = ''; } }); }); //this.initEdit(); } }; /*BootstrapTable.prototype.initHeader = function(){ _initHeader.apply(this, Array.prototype.slice.apply(arguments)); this.$container.find('.fixed-table-header').addClass('success'); };*/ BootstrapTable.prototype.initBody = function () { var that = this; _initBody.apply(this, Array.prototype.slice.apply(arguments)); if (!that.options.editable) return; this.initEdit(); //如果列是下拉框,则转换值为对应的文本 $.each(that.columns,function(indx,col){ if(col.edit && col.edit.type == 'select'){ col.edit = $.extend({},$.fn.bootstrapSelect.defaults,col.edit); if(col.edit.data.length > 0){ that.$body.find('>tr').each(function(){ if(that.getData().length < 1)return true; var rowData = that.data[$(this).data('index')];//当前点击td所在行的数据 var $td = $(this).find('td').eq(col.fieldIndex); $.each(col.edit.data,function(i,data){ if(data[col.edit.valueField] == rowData[col.field]){ $td.html(data[col.edit.textField]); } }); }); } else if(col.edit.url){ $.ajax({ url:col.edit.url, type:'post', data:col.edit.paramsType == 'json' ? JSON.stringify(col.edit.params) : col.edit.params, dataType:'json', success: function(jsonLst) { col.edit.onLoadSuccess.call(this,jsonLst); that.$body.find('>tr').each(function(){ if(that.getData().length < 1)return true; var rowData = that.data[$(this).data('index')];//当前点击td所在行的数据 var $td = $(this).find('td').eq(col.fieldIndex); $.each(jsonLst,function(i,data){ if(data[col.edit.valueField] == rowData[col.field]){ $td.html(data[col.edit.textField]); } }); }); col.edit.data = jsonLst; col.edit.url = null; }, error: function(xhr, textStatus, errorThrown){ col.edit.onLoadError.call(this); col.edit.data = []; col.edit.url = null; throw col.field+' 列下拉框数据加载失败'; } }); } } }); }; //根据行号删除指定行 BootstrapTable.prototype.removeRow = function (rowNum) { var that = this; var len = that.options.data.length; if (isNaN(rowNum)){ return; } if(that.$body.find('.editable-select').data('index') != rowNum){ recover(that); } //删除数据 that.options.data.splice(rowNum,1); if (len === that.options.data.length){ return; } var oldClass = {};//保存被标记修改的样式 that.$body.find('>tr').each(function(indx){ if($(this).hasClass('editable-modify')){ if(indx > rowNum){ oldClass[indx-1] = 'editable-modify'; } else{ oldClass[indx] = 'editable-modify'; } } }); //this.prevEditRow = null; //this.$body.find('>tr').removeClass('editable-select'); that.initBody(); //将标记改变过行的样式从新设置回去 for(var key in oldClass){ that.$body.find('>tr').eq(key).addClass(oldClass[key]); } //this.initEdit(); //没有数据时给提示加上样式 if(that.getData().length < 1){ that.$body.find('>tr').addClass('no-records-found'); } }; BootstrapTable.prototype.append = function (){ var that = this; //if(!that.enableAppend)return; var oldClass = {};//保存被标记修改的样式 that.$body.find('>tr').each(function(indx){ if($(this).hasClass('editable-modify') || $(this).hasClass('editable-insert')){ oldClass[indx] = 'editable-modify'; } }); arguments[0] = $.extend({},that.insertRowVal,arguments[0]); _append.apply(this,Array.prototype.slice.apply(arguments)); if (that.options.editable){ //that.initEdit(); setTimeout(function (){ //将标记改变过行的样式从新设置回去 for(var key in oldClass){ that.$body.find('>tr').eq(key).addClass(oldClass[key]); } that.$body.find('>tr:last').addClass('editable-modify'); that.$body.find('>tr:last').addClass('editable-insert');//双重保险,防止在快速点击添加时,为给新增行设置editable-modify属性 that.$body.find('>tr:last').click(); },60); } }; BootstrapTable.prototype.onSort = function () { _onSort.apply(this, Array.prototype.slice.apply(arguments)); var that = this; if (that.options.editable) { this.initEdit(); } }; BootstrapTable.prototype.getData = function () { return (this.searchText || this.searchCallback) ? this.data : this.options.data; }; BootstrapTable.prototype.getColumns = function () { return this.options.columns; }; /** * 获取有被修改过行的值 */ BootstrapTable.prototype.getModiDatas = function (){ var that = this; var datas = []; that.$body.find('.editable-modify').each(function(){ if(that.data[$(this).data('index')]){ datas.push(that.data[$(this).data('index')]); } }); return datas; }; /** * 获取指定列的和,参数为列下标 */ BootstrapTable.prototype.getColTotal = function (num){ var retVal = 0; this.$body.find('>tr').each(function(){ var colNum = 0; if($(this).hasClass('editable-select')){ colNum = $(this).find('td').eq(num).find('input').val(); } else{ colNum = $(this).find('td').eq(num).html(); } if(!isNaN(colNum)){//是数字才做想加 retVal += Number(colNum); } }); return retVal; }; /** * 创建可编辑表格 */ BootstrapTable.prototype.initEdit = function(){ var that = this, data = this.getData(); //this.$body.find('> tr').unbind('click').on('click' //this.$body.delegate('>tr','click' this.$body.find('> tr').unbind('click').on('click',function(){ var $tr = $(this); if($tr.hasClass('editable-select') || data.length < 1 || $tr.hasClass('no-records-found')){ return; } $tr.removeClass('no-records-found'); recover(that); that.prevEditRow = $tr; $tr.addClass('editable-select');//给当前编辑行添加样式,目前样式为空只做标识使用 that.$body.find('> tr').not(this).removeClass('editable-select'); $tr.find('td').closest('td').siblings().html(function(i,html){ initTrClick(that,this); }); }); //鼠标点击事件 $(document).bind('mousedown',function(event){ var $target = $(event.target); if(!($target.parents().andSelf().is(that.$body)) && !($target.parents().andSelf().is($('.datetimepicker')))){ setTimeout(function () { recover(that); //that.prevEditRow = null; //that.$body.find('> tr').removeClass('editable-select'); },10); }; }); }; $.fn.bootstrapTable.methods.push('getColumns', 'getModiDatas','removeRow','getColTotal'); /** * 给tr添加点击事件 */ function initTrClick(that,_this){ that.enableAppend = true; var $td = $(_this); var $tr = $td.parent(); var rowData = that.data[$tr.data('index')];//当前点击td所在行的数据 var tdIndex = $tr.children().index($td);//当前点击的td下标 var tdOpt = that.columns['column'+tdIndex]; if(!tdOpt.edit || typeof tdOpt.edit != 'object'){ return ; } $td.data('field',tdOpt.field); if(!$td.data('oldVal')){ $td.data('oldVal',$.trim(rowData[tdOpt.field])); } var height = $td.innerHeight() - 3; var width = $td.innerWidth() - 2; $td.data('style',$td.attr('style'));//保存原来的样式 $td.attr('style','margin:0px;padding:1px!important;'); var placeholder = ''; if(tdOpt.edit.required == true){ placeholder = '必填项'; } var value = rowData[tdOpt.field] == null || rowData[tdOpt.field] == ''?'':rowData[tdOpt.field]; $td.html('<div style="margin:0;padding:0;overflow:hidden;border:solid 0px red;height:'+(height)+'px;width:'+(width)+'px;">' +'<input type="text" placeholder="'+placeholder+'" value="'+value+'" style="margin-left: 0px; margin-right: 0px; padding-top: 1px; padding-bottom: 1px; width:100%;height:100%">' +'</div>'); $td.width(width); var $input = $td.find('input'); if(!tdOpt.edit.type || tdOpt.edit.type == 'text'){ if(tdOpt.edit['click'] && typeof tdOpt.edit['click'] === 'function'){ $input.unbind('click').bind('click',function(event){ tdOpt.edit['click'].call(this,event); }); } if(tdOpt.edit['focus'] && typeof tdOpt.edit['focus'] === 'function'){ $input.unbind('focus').bind('focus',function(event){ tdOpt.edit['focus'].call(this,event); }); } $input.unbind('blur').on('blur',function(event){ if(tdOpt.edit['blur'] && typeof tdOpt.edit['blur'] === 'function'){ tdOpt.edit['blur'].call(this,event); } }); } else if(tdOpt.edit.type == 'select'){ $input.bootstrapSelect(tdOpt.edit); } else if(tdOpt.edit.type == 'date'){ $td.html('<div style="margin:0;padding:0;overflow:hidden;border:solid 0px red;height:'+(height)+'px;width:'+(width)+'px;" class="input-group date form_datetime" data-link-field="dtp_editable_input">' +'<input class="form-control" type="text" value="'+value+'">' +'<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>' +'</div>' +'<input type="hidden" id="dtp_editable_input" value="'+value+'"/>' ); that.$body.find('.form_datetime').datetimepicker({ weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, forceParse: 0, language:'zh-CN', format: 'yyyy-mm-dd hh:ii:ss', pickerPosition: 'bottom-left', showMeridian: 1 }); } } /** * 恢复tr,使之处于不可编辑状态 */ function recover(that){ var isModi = false;//判断行值是否变动过 if(that.prevEditRow != null){ that.prevEditRow.find('td').closest('td').siblings().html(function(i,html){ $(this).attr('style',$(this).data('style')); var textVal = $(this).find('input[type="text"]').val(); var hiddenVal = $(this).find('input[type="hidden"]').val(); if(typeof $(this).find('input[type="text"]').bootstrapSelect('getText') != 'object'){ $(this).find('input[type="text"]').bootstrapSelect('destroy'); } if(textVal != undefined){ if($(this).data('oldVal') != (hiddenVal?hiddenVal:$.trim(textVal)) && $(this).data('field')) { that.data[that.prevEditRow.data('index')][$(this).data('field')] = hiddenVal?hiddenVal:$.trim(textVal); isModi = true; } if(that.columns['column'+i].edit.required == true){ if(textVal == null || textVal == ''){ that.enableAppend = false; return '<span style="color:red;">必填项不能为空</span>'; } } return $.trim(textVal); } }); //新值跟旧值不匹配证明被改过 if(isModi || that.prevEditRow.hasClass('editable-insert')){ that.prevEditRow.addClass('editable-modify'); } else{ that.prevEditRow.removeClass('editable-modify'); } that.prevEditRow = null; that.$body.find('> tr').removeClass('editable-select'); } } })(jQuery); ``` 哪位大神能帮忙解决下
爬虫福利二 之 妹子图网MM批量下载
爬虫福利一:27报网MM批量下载    点击 看了本文,相信大家对爬虫一定会产生强烈的兴趣,激励自己去学习爬虫,在这里提前祝:大家学有所成! 目标网站:妹子图网 环境:Python3.x 相关第三方模块:requests、beautifulsoup4 Re:各位在测试时只需要将代码里的变量 path 指定为你当前系统要保存的路径,使用 python xxx.py 或IDE运行即可。
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 顺便拉下票,我在参加csdn博客之星竞选,欢迎投票支持,每个QQ或者微信每天都可以投5票,扫二维码即可,http://m234140.nofollow.ax.
比特币原理详解
一、什么是比特币 比特币是一种电子货币,是一种基于密码学的货币,在2008年11月1日由中本聪发表比特币白皮书,文中提出了一种去中心化的电子记账系统,我们平时的电子现金是银行来记账,因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述,这一层面介绍的文章很多,本文主要从更深层的技术原理角度进行介绍。 二、问题引入 假设现有4个人...
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发
网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 欢迎 改进 留言。 演示地点跳到演示地点 html代码如下`&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;music&lt;/title&gt; &lt;meta charset="utf-8"&gt
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。 1. for - else 什么?不是 if 和 else 才
数据库优化 - SQL优化
前面一篇文章从实例的角度进行数据库优化,通过配置一些参数让数据库性能达到最优。但是一些“不好”的SQL也会导致数据库查询变慢,影响业务流程。本文从SQL角度进行数据库优化,提升SQL运行效率。 判断问题SQL 判断SQL是否有问题时可以通过两个表象进行判断: 系统级别表象 CPU消耗严重 IO等待严重 页面响应时间过长
2019年11月中国大陆编程语言排行榜
2019年11月2日,我统计了某招聘网站,获得有效程序员招聘数据9万条。针对招聘信息,提取编程语言关键字,并统计如下: 编程语言比例 rank pl_ percentage 1 java 33.62% 2 c/c++ 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7
通俗易懂地给女朋友讲:线程池的内部原理
餐厅的约会 餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”我楞了一下,心里想女朋友今天是怎么了,怎么突然问出这么专业的问题,但做为一个专业人士在女朋友面前也不能露怯啊,想了一下便说:“我先给你讲讲我前同事老王的故事吧!” 大龄程序员老王 老王是一个已经北漂十多年的程序员,岁数大了,加班加不动了,升迁也无望,于是拿着手里
经典算法(5)杨辉三角
杨辉三角 是经典算法,这篇博客对它的算法思想进行了讲解,并有完整的代码实现。
腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹?
昨天,有网友私信我,说去阿里面试,彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题。无独有偶,今天笔者又发现有网友吐槽了一道腾讯的面试题,我们一起来看看。 腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹? 在互联网职场论坛,一名程序员发帖求助到。二面腾讯,其中一个算法题:64匹
面试官:你连RESTful都不知道我怎么敢要你?
面试官:了解RESTful吗? 我:听说过。 面试官:那什么是RESTful? 我:就是用起来很规范,挺好的 面试官:是RESTful挺好的,还是自我感觉挺好的 我:都挺好的。 面试官:… 把门关上。 我:… 要干嘛?先关上再说。 面试官:我说出去把门关上。 我:what ?,夺门而去 文章目录01 前言02 RESTful的来源03 RESTful6大原则1. C-S架构2. 无状态3.统一的接
JDK12 Collectors.teeing 你真的需要了解一下
前言 在 Java 12 里面有个非常好用但在官方 JEP 没有公布的功能,因为它只是 Collector 中的一个小改动,它的作用是 merge 两个 collector 的结果,这句话显得很抽象,老规矩,我们先来看个图(这真是一个不和谐的图????): 管道改造经常会用这个小东西,通常我们叫它「三通」,它的主要作用就是将 downstream1 和 downstre...
为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?
关于SQL和ORM的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论,感触还是有一些,于是就有了今天这篇文。 声明:本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实,讲道理,所以,请各位看官勿喷。 一、事件起因 关于Mybatis和JPA孰优孰劣的问题,争论已经很多年了。一直也没有结论,毕竟每个人的喜好和习惯是大不相同的。我也看
SQL-小白最佳入门sql查询一
不要偷偷的查询我的个人资料,即使你再喜欢我,也不要这样,真的不好;
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // doshom...
【图解经典算法题】如何用一行代码解决约瑟夫环问题
约瑟夫环问题算是很经典的题了,估计大家都听说过,然后我就在一次笔试中遇到了,下面我就用 3 种方法来详细讲解一下这道题,最后一种方法学了之后保证让你可以让你装逼。 问题描述:编号为 1-N 的 N 个士兵围坐在一起形成一个圆圈,从编号为 1 的士兵开始依次报数(1,2,3…这样依次报),数到 m 的 士兵会被杀死出列,之后的士兵再从 1 开始报数。直到最后剩下一士兵,求这个士兵的编号。 1、方...
致 Python 初学者
欢迎来到“Python进阶”专栏!来到这里的每一位同学,应该大致上学习了很多 Python 的基础知识,正在努力成长的过程中。在此期间,一定遇到了很多的困惑,对未来的学习方向感到迷茫。我非常理解你们所面临的处境。我从2007年开始接触 python 这门编程语言,从2009年开始单一使用 python 应对所有的开发工作,直至今天。回顾自己的学习过程,也曾经遇到过无数的困难,也曾经迷茫过、困惑过。开办这个专栏,正是为了帮助像我当年一样困惑的 Python 初学者走出困境、快速成长。希望我的经验能真正帮到你
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,...
程序员:我终于知道post和get的区别
是一个老生常谈的话题,然而随着不断的学习,对于以前的认识有很多误区,所以还是需要不断地总结的,学而时习之,不亦说乎
GitHub标星近1万:只需5秒音源,这个网络就能实时“克隆”你的声音
作者 | Google团队 译者 | 凯隐 编辑 | Jane 出品 | AI科技大本营(ID:rgznai100) 本文中,Google 团队提出了一种文本语音合成(text to speech)神经系统,能通过少量样本学习到多个不同说话者(speaker)的语音特征,并合成他们的讲话音频。此外,对于训练时网络没有接触过的说话者,也能在不重新训练的情况下,仅通过未知...
《程序人生》系列-这个程序员只用了20行代码就拿了冠军
你知道的越多,你不知道的越多 点赞再看,养成习惯GitHub上已经开源https://github.com/JavaFamily,有一线大厂面试点脑图,欢迎Star和完善 前言 这一期不算《吊打面试官》系列的,所有没前言我直接开始。 絮叨 本来应该是没有这期的,看过我上期的小伙伴应该是知道的嘛,双十一比较忙嘛,要值班又要去帮忙拍摄年会的视频素材,还得搞个程序员一天的Vlog,还要写BU...
加快推动区块链技术和产业创新发展,2019可信区块链峰会在京召开
11月8日,由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办,科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。   区块链技术被认为是继蒸汽机、电力、互联网之后,下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力,电力解决了人类基本的生活需求,互联网彻底改变了信息传递的方式,区块链作为构造信任的技术有重要的价值。   1...
程序员把地府后台管理系统做出来了,还有3.0版本!12月7号最新消息:已在开发中有github地址
第一幕:缘起 听说阎王爷要做个生死簿后台管理系统,我们派去了一个程序员…… 996程序员做的梦: 第一场:团队招募 为了应对地府管理危机,阎王打算找“人”开发一套地府后台管理系统,于是就在地府总经办群中发了项目需求。 话说还是中国电信的信号好,地府都是满格,哈哈!!! 经常会有外行朋友问:看某网站做的不错,功能也简单,你帮忙做一下? 而这次,面对这样的需求,这个程序员...
网易云6亿用户音乐推荐算法
网易云音乐是音乐爱好者的集聚地,云音乐推荐系统致力于通过 AI 算法的落地,实现用户千人千面的个性化推荐,为用户带来不一样的听歌体验。 本次分享重点介绍 AI 算法在音乐推荐中的应用实践,以及在算法落地过程中遇到的挑战和解决方案。 将从如下两个部分展开: AI算法在音乐推荐中的应用 音乐场景下的 AI 思考 从 2013 年 4 月正式上线至今,网易云音乐平台持续提供着:乐屏社区、UGC...
【技巧总结】位运算装逼指南
位算法的效率有多快我就不说,不信你可以去用 10 亿个数据模拟一下,今天给大家讲一讲位运算的一些经典例子。不过,最重要的不是看懂了这些例子就好,而是要在以后多去运用位运算这些技巧,当然,采用位运算,也是可以装逼的,不信,你往下看。我会从最简单的讲起,一道比一道难度递增,不过居然是讲技巧,那么也不会太难,相信你分分钟看懂。 判断奇偶数 判断一个数是基于还是偶数,相信很多人都做过,一般的做法的代码如下...
【管理系统课程设计】美少女手把手教你后台管理
【文章后台管理系统】URL设计与建模分析+项目源码+运行界面 栏目管理、文章列表、用户管理、角色管理、权限管理模块(文章最后附有源码) 1. 这是一个什么系统? 1.1 学习后台管理系统的原因 随着时代的变迁,现如今各大云服务平台横空出世,市面上有许多如学生信息系统、图书阅读系统、停车场管理系统等的管理系统,而本人家里就有人在用烟草销售系统,直接在网上完成挑选、购买与提交收货点,方便又快捷。 试想,若没有烟草销售系统,本人家人想要购买烟草,还要独自前往药...
4G EPS 第四代移动通信系统
目录 文章目录目录4G 与 LTE/EPCLTE/EPC 的架构E-UTRANE-UTRAN 协议栈eNodeBEPCMMES-GWP-GWHSSLTE/EPC 协议栈概览 4G 与 LTE/EPC 4G,即第四代移动通信系统,提供了 3G 不能满足的无线网络宽带化,主要提供数据(上网)业务。而 LTE(Long Term Evolution,长期演进技术)是电信领域用于手机及数据终端的高速无线通...
相关热词 c# 输入ip c# 乱码 报表 c#选择结构应用基本算法 c# 收到udp包后回包 c#oracle 头文件 c# 序列化对象 自定义 c# tcp 心跳 c# ice连接服务端 c# md5 解密 c# 文字导航控件
立即提问