关于jQuery追加数据页面问题

index.html

 <!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Photo Library</title>

    <link rel="stylesheet" href="10.css" type="text/css" />
    <!--[if lte IE 8]>
      <link rel="stylesheet" href="10-ie.css" type="text/css" />
    <![endif]-->
  </head>
  <body>
    <div id="container">
      <h1>Photo Gallery</h1>

      <div id="gallery">
        <div class="photo">
          <img src="photos/skyemonroe.jpg">
          <div class="details">
            <div class="description">The Cuillin Mountains, Isle of Skye, Scotland.</div>
            <div class="date">12/24/2000</div>
            <div class="photographer">Alasdair Dougall</div>
          </div>
        </div>
        <div class="photo">
          <img src="photos/dscn1328.jpg">
          <div class="details">
            <div class="description">Mt. Ruapehu in summer</div>
            <div class="date">01/13/2005</div>
            <div class="photographer">Andrew McMillan</div>
          </div>
        </div>
        <div class="photo">
          <img src="photos/024.JPG">
          <div class="details">
            <div class="description">midday sun</div>
            <div class="date">04/26/2011</div>
            <div class="photographer">Jaycee Barratt</div>
          </div>
        </div>
        <div class="photo">
          <img src="photos/dsc20040321_191051_23.jpg">
          <div class="details">
            <div class="description">Dark sunset sky tones</div>
            <div class="date">03/21/2004</div>
            <div class="photographer">Leon Brooks</div>
          </div>
        </div>
        <div class="photo">
          <img src="photos/portland_178.jpg">
          <div class="details">
            <div class="description">Mt. Shasta, Weed, CA</div>
            <div class="date">06/16/2004</div>
            <div class="photographer">Brian Lopez</div>
          </div>
        </div>
        <div class="photo">
          <img src="photos/michelle_229.jpg">
          <div class="details">
            <div class="description">Mountain with tree cover on foothills</div>
            <div class="date">09/28/2004</div>
            <div class="photographer">Brian Lopez</div>
          </div>
        </div>
        <div class="photo">
          <img src="photos/100_0207.JPG">
          <div class="details">
            <div class="description">Poas Volcano, Caldera and Poor Man's Umbrella</div>
            <div class="date">01/02/2004</div>
            <div class="photographer">Nat Edwards</div>
          </div>
        </div>
        <div class="photo">
          <img src="photos/DSC01281.JPG">
          <div class="details">
            <div class="description">Mt Compas, South Australia</div>
            <div class="date">01/01/2007</div>
            <div class="photographer">Rod Conlon</div>
          </div>
        </div>
        <div class="photo">
          <img src="photos/m4.jpg">
          <div class="details">
            <div class="description">Waterfall on the outskirts of Highlands N.C.</div>
            <div class="date">11/21/2008</div>
            <div class="photographer">Neal Floyd</div>
          </div>
        </div>
      </div>
<a id="more-photos" href="1.html">More Photos</a>
    </div>
    <script src="jquery.js"></script>
    <script src="10.js"></script>
  </body>
</html>

1.html

 <div class="photo">
  <img src="photos/dsc_21070a.jpg">
  <div class="details">
    <div class="description">Gum Tree at Sunset, Auckland, New Zealand</div>
    <div class="date">04/12/2009</div>
    <div class="photographer">Andrew McMillan</div>
  </div>
</div>
<div class="photo">
  <img src="photos/01070131.JPG">
  <div class="details">
    <div class="description">Noleridge Park Cedar Rapids Iowa Cloudscape</div>
    <div class="date">01/07/2000</div>
    <div class="photographer">Allan Zieser</div>
  </div>
</div>
<div class="photo">
  <img src="photos/P3120502.JPG">
  <div class="details">
    <div class="description">Mountains in Jasper</div>
    <div class="date">03/12/2006</div>
    <div class="photographer">Teri Metcalf</div>
  </div>
</div>
<div class="photo">
  <img src="photos/azsnow.jpg">
  <div class="details">
    <div class="description">San Fransisco Mountains looking across Flagstaff</div>
    <div class="date">12/14/2004</div>
    <div class="photographer">Tyler Finvold</div>
  </div>
</div>
<div class="photo">
  <img src="photos/795040-R1-026-11A_011.jpg">
  <div class="details">
    <div class="description">God's Peace</div>
    <div class="date">11/15/2010</div>
    <div class="photographer">Dan Hart</div>
  </div>
</div>
<div class="photo">
  <img src="photos/0000001.jpg">
  <div class="details">
    <div class="description">going home</div>
    <div class="date">11/23/2010</div>
    <div class="photographer">Guest</div>
  </div>
</div>
<div class="photo">
  <img src="photos/010.JPG">
  <div class="details">
    <div class="description">Clouds in southern England</div>
    <div class="date">04/23/2011</div>
    <div class="photographer">Jaycee Barratt</div>
  </div>
</div>
<div class="photo">
  <img src="photos/dsc20050117_060629_5.jpg">
  <div class="details">
    <div class="description">Whispy clouds</div>
    <div class="date">01/17/2005</div>
    <div class="photographer">Leon Brooks</div>
  </div>
</div>
<div class="photo">
  <img src="photos/dsc20041029_180840_10.jpg">
  <div class="details">
    <div class="description">Sun exploding through clouds, Wahroona, Western Australia</div>
    <div class="date">10/29/2004</div>
    <div class="photographer">Leon Brooks</div>
  </div>
</div>

10.js

 $(document).ready(function() {
  var pageNum = 1;
  $('#more-photos').click(function(event) {
    event.preventDefault();
    var $link = $(this);
    var url = $link.attr('href');
    if (url) {
      $.get(url, function(data) {
        $('#gallery').append(data);
      });
      pageNum++;
      if (pageNum < 20) {
        $link.attr('href:', pageNum + '.html');
      }
      else {
        $link.remove();
      }
    }
  });

  $('div.photo').hover(function() {
    $(this).find('.details').fadeTo('fast', 0.7);
  }, function() {
    $(this).find('.details').fadeOut('fast');
  });
});

html代码中间的div部分可以忽略,要实现点击 More Photos 的时候再页面后直接追加页面1.html,但是无法追加成功,点击了没效果,希望大牛指点一下

2个回答

jquery路径对不对,发布网站没有?没有发布网站通过http协议访问不要用webkit核心浏览器如chrome来测试,会出现跨域问题

zmjJoker
zmjJoker 回复无聊码农: 我用的mac,在新页面打开1.html没问题,但是就是追加不上去,点击了没有反应
接近 4 年之前 回复
showbo
支付宝加好友偷能量挖 回复zmjJoker: safari也是webkit核心。firefox f12打开浏览器看报什么错误,不是说路径对就对的,要看浏览器最终的结果
接近 4 年之前 回复
zmjJoker
zmjJoker 路径是对的,网站没有发布,但我用的是firefox和safari调试的 但是我对着jQuery基础教程做的,他给出的完整的代码也是执行不了的
接近 4 年之前 回复
zmjJoker
zmjJoker 路径是对的,网站没有发布,但我用的是firefox和safari调试的 但是我对着jQuery基础教程做的,他给出的完整的代码也是执行不了的
接近 4 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
jquery mobile 页面跳转不能刷新
A页面form表单设置data-Ajax=false,跳转B页面后, 如果b页面不加载添加jquery mobile的js就可以刷新页面, 如果添加了jquery mobile的js再刷新页面form提交的数据就会丢失,求解
求一个asp.net 的运用jquery ajax先数据库 添加数据的实例
我在做一个asp.net技术做的问卷调查页面,需要把每一项的文本都添加到sqlserver数据库,大概20个选项,每个选项平均有100个字左右 我想问一下 这么大的数据量用jquery ajax 真的可以吗? 如果可以,请各位大神做个用jquery ajax做一个向数据库添加的实例给我,要注释齐全,代码规范的,谢谢!
jquery mbile手机页面中多个page的切换
本人想在jquery mobile制作的手机页面(index.aspx)中实现这样的功能: 在一个<navbar><ul><li>门店一</li><li>门店二</li></ul><navar>列表中做选择查看不同门店的销售情况。 那么选择项后接下来应该怎么做,是给每个选择项添加不同页面链接进行跳转呢(<li><a href="shop1.aspx">门店一</a>),还是说可像普通页面一样,触发选择事件,然后异步加载数据呢。 像第一种情况该如何传参数给shop1.aspx页面
关于jquery $.post()中 function(result)没有值是怎么回事
jquery $.post()中,$.post(cat_post_url,post_data,function(result),这个function(result)没有值是怎么回事? 最近在做一个微商城的项目,数据提交用jquery $.post来提交,但是到数据处理环节就没有反应了,找不到原因所在啊,我输出cat_post_url和post_data均有值,但是提交就是undefined,那就是应该function(result)没有值,怎么回事, 测试地址: http://www.aizhuchao.com/weidian/user.php?c=store&a=index, 用户:18974515280,密码:520iamsi,现在是添加商品和分类都没有反应, 添加分类的页面是http://www.aizhuchao.com/weidian/user.php?c=goods&a=category#create, 现在卡壳在这里了,搞了几天都没有解决问题,哪位大神可以帮忙解决下,不胜感激!
jquery选择器无法选择页面中的元素
事情挺简单,我一开始的界面是这种结构的 ``` <body> <div id="TOP"> </div> <div id="aritcle" class="..."> </div> </body> ``` 然后我用ajax动态的添加了几个div,是这样的 ``` var s=""; for() { s+='<div class="comment">'+...'+'</div>'; $("body").append(s); s=""; } ``` 这样写我的数据是成功添加到界面了,但是我尝试获取后面添加的元素再进行进一步的处理的时候,我打算遍历一遍我添加的div,结果 _$("body").children().length_ 的值居然是2...也就是说只获取到了我之前页面就有的两个div,我后边动态添加的div在选择器里没有办法获取到,然后我用 _$("body").children().eq(2)_ 也没有办法获取到后边的内容,想问问这是什么情况 高强度在线等解惑,3Q
jQuery的ajax异步请求问题
![图片说明](https://img-ask.csdn.net/upload/201905/28/1559006956_26702.png) 如图,我在使用getJSON获取数据后添加dom元素时出现了一个异步请求问题,我想要的效果是获取数据然后添加dom,但是实际效果是,打印append前后元素是有效果的,但是页面上不渲染,我该怎么做啊?不想使用添加async: false,求大佬给个建议 ![图片说明](https://img-ask.csdn.net/upload/201905/28/1559006965_658075.png)
jquery 向表格中添加的新行,提交表单添加的新行数据丢失
import java.util.List; import org.apache.struts.action.ActionForm; import erange.deanfu.service.vo.PermissionBean; import erange.tools.AutoArrayList; public class PermissionForm extends ActionForm{ private static final long serialVersionUID = -7967103081219242369L; private List perm = new AutoArrayList(PermissionBean.class); @SuppressWarnings("unchecked") public void setPerm(List perms) { this.perm.clear(); this.perm.addAll(perms); } public List getPerm() { return this.perm; } } 自定义ActionForm import java.util.ArrayList; public class AutoArrayList extends ArrayList { private static final long serialVersionUID = -8293504731897767974L; private Class itemClass; public AutoArrayList(Class itemClass) { this.itemClass = itemClass; } @SuppressWarnings("unchecked") public Object get(int index) { try { while (index >= size()) { add(itemClass.newInstance()); } } catch (Exception e) { } return super.get(index); } } 自定义ArrayList <action path="/permManager" scope="request" name="permissionForm" parameter="op"> <forward name="manager" path="/WEB-INF/jsp/manager.htm"/> </action> 绑定到Action <l:iterate id="perm" property="perm" name="permissionForm"> <tr> <td> <h:text property="permission_id" name="perm" indexed="true" readonly="true" style="width:50px" /> </td> <td> <h:text property="permission_name" name="perm" indexed="true" /> </td> <td> <h:text property="permission_desc" name="perm" indexed="true" /> </td> <td> <h:text property="value" name="perm" indexed="true" /> </td> <td> <a href="javascript:void(0)" name="update"><b:message key="op.update"/></a> </td> <td> <a href="javascript:void(0)" name="delete"><b:message key="op.delete"/></a> </td> </tr> </l:iterate> 页面部分添加 indexed="true" ,以上用于Action批量处理数据. ActionForm元素为基本类型时,源码应该是这样 input type="text" name="permission_id" 经过以上步骤之后,源码如下 input type="text" name="perm[0].permission_id" value="1" readonly="readonly" style="width:50px" 也就是说,如果页面<html:text indexed="true"/>中没有indexed="true"属性,Action无法获取input值.这里大概是关键位置. 然后我使用jquery向表格里插入新的行 $tr = "<tr><td><input type='text' name='perm[" + $idx + "].permission_id' readonly='true' style='width:50px'/></td>"; $tr += "<td><input type='text' name='perm[" + $idx + "].permission_name'/></td>"; $tr += "<td><input type='text' name='perm[" + $idx + "].permission_desc'/></td>"; $tr += "<td><input type='text' name='perm[" + $idx + "].value'/></td>"; $tr += "<td><a href='javascript:void(0)' name='save'>保存</a></td><td><a href='javascript:void(0)' name='moveout'>去除</a></td></tr>"; 页面点击action.submit()时,除了新增行的数据丢失,其他原有数据都可以从action中获取. 求解决办法. ********自己解决了.*********
【手机上传】jQuery传递数据同时上传文件到php后台接受不到的问题
各位前辈们好,这个问题困扰我挺长时间了,[这是我之前的提问](http://ask.csdn.net/questions/231374 ""),我在网上下载的一份不完整源码:前端有一个上传框,上传图片后会自动生成预览图,可是后台php页面用post方法或者file方法都收不到上传的文件,text文本数据可以收到。有大神告诉我说用form.js插件,小弟不才怎么弄也不会,所以求大神告知详细一点的操作,在哪里添加什么才好?代码如下:![前端](https://img-ask.csdn.net/upload/201601/14/1452743288_168372.jpg) ![js源码](https://img-ask.csdn.net/upload/201601/14/1452743321_52970.jpg) html代码 ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="mobile.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#add-topic-form").submit(postTopic); $("#picture").val(""); }); </script> </head> <body> <form method="post" id="add-topic-form" enctype="multipart/form-data"> <div class="inner"> <div class="input-body"> <textarea maxlength="200" name="message" rows="7"></textarea> <div class="input-file"> <div class="file-show"></div> <input type="button" class="camera" > <input type="file" name="picture" id="picture" accept="image/gif, image/jpeg, image/png" onchange="uploadPreview(this.files)"> </div> </div> <input class="submit-button" type="submit" value="发布"> </div> </form> </body> </html> ``` js代码 ``` function uploadPreview(files) { if( !window.FileReader ){} //此处为一些条件 $(".file-show").html("预览加载中..."); var reader = new FileReader(); reader.onload = function(e) { $(".file-show").html(""); $("<img src='data:application/octet-stream;"+e.target.result.substr(e.target.result.indexOf("base64,"))+"' id='previewImg' />").appendTo($(".file-show")).click(function() { $(this).remove(); $("#picture").val(""); }); } reader.readAsDataURL(files[0]); } function postTopic() { var msg = $.trim($('textarea[name=message]').val()); var picture = ""; picture = $("#previewImg").attr("src"); $(".loading").show(); $("#add-topic-form").hide(); $.post("addTopic.php",{"do":"addTopic","msg":msg,"picture":$("#picture").val()},function(data){} //在addTopic.php页面接收不到东西 { if (data.result == "login") { location.href = "./passport.php"; } else if (data.result == "success") { location.href = "./?cid=" + $('input[name=cid]').val(); } else if (data.result == "error") { alert(data.message); $(".loading").hide(); $("#add-topic-form").show(); $('html, body').animate({scrollTop: $(document).height()}, 300); } },"json"); return false; } ```
给静态页面添加数据库,要求用go实现增删改查,怎么做?
写好了一个静态页面但是不会添加数据库,求大神指导怎么添加。ajax已经看了,但是不是很懂。
jquery的append动态添加元素后为什么会全局刷新页面
``` 需求是自定义的属性需要显示在页面上, //自定义属性 $("#addAttr").click(function(){ //获取自定属性的属性名称类型和要素类别 var attrPage= $("#attrPage").val(); var attrName= $("#attrName").val(); var attrCate= $("#attrCate").val(); //保存在数据库中 //在前台展示 alert("attrPage:"+attrPage+" attrName:"+attrName+" attrCate:"+attrCate); var html="<input name='"+attrName+"' type='checkbox'>"+attrName+"</input>"; if(attrPage == 1){ $("#baseInfo").append(html); }else if(attrPage == 2){ $("#marketInfo").append(html); }else if(attrPage == 3){ $("#accessoryInfo").append(html); }else if(attrPage == 4){ $("#brokerage").append(html); } }); <div id="instranceInfoTemplate" class="span12" style="display:none;"> <form id="instranceInfoAttr" role="form"> <div id="baseInfo" class="form-group"> <label for="name">产品基本信息</label> <input id="productFeature" name="productFeature" type="checkbox" /> 产品特点 &nbsp;&nbsp; <input id="premium" name="premium" type="checkbox" /> 参考保费&nbsp;&nbsp; <input id="productIntroduce" name="productIntroduce" type="checkbox" /> 产品介绍 &nbsp;&nbsp; <input id="sort" name="sort" type="checkbox" /> 产品排序 &nbsp;&nbsp; </div> <div id="marketInfo" class="form-group"> <label for="name">产品营销信息</label> <input id="productFeature" name="productFeature" type="checkbox" /> 产品小图 &nbsp;&nbsp; <input id="premium" name="premium" type="checkbox" /> 产品大图&nbsp;&nbsp; <input id="productIntroduce" name="productIntroduce" type="checkbox" /> 产品营销文案 &nbsp;&nbsp; <input id="sort" name="sort" type="checkbox" /> 风险提示信息 &nbsp;&nbsp; </div> <div id="accessoryInfo" class="form-group"> <label for="name">产品附件信息</label> <input id="productFeature" name="productFeature" type="checkbox" /> 添加产品附件 &nbsp;&nbsp; </div> <div id="brokerage" class="form-group"> <label for="name">产品佣金信息</label> <input id="productFeature" name="productFeature" type="checkbox" /> 产品折标率 &nbsp;&nbsp; <input id="premium" name="premium" type="checkbox" /> 内部咨询师顾问佣金分成比例 &nbsp;&nbsp; <input id="productIntroduce" name="productIntroduce" type="checkbox" /> 外部咨询师佣金分成比例 &nbsp;&nbsp; </div> <input type='button' class='btn btn-large btn-primary' data-toggle='modal' data-target='#myModal'>自定义添加属性</button> <button type="submit" class="btn btn-default">提交</button> </form> </div> ```
jquery怎么实现不刷新页面就更新下拉列表?
![图片说明](https://img-ask.csdn.net/upload/201907/22/1563777265_185700.png) ![图片说明](https://img-ask.csdn.net/upload/201907/22/1563777367_428849.png) 每次添加教学区后,教室管理教学区下拉列表并未更新最新添加的教学区,需要重新刷新整个页面方能出现。 现在想添加后不刷新直接实时在下拉列表中更新 ``` //添加一个教学区 function addArea() { var areaName = $("#operator_areaName").val(); if (areaName == '') { layer.msg("教学区名称不能为空", { time : 1500, icon : 2 }); return; } else { // 发送请求 var url = "/school/schoolArea/add"; var data = { "areaName" : areaName }; $.post(url, data, function(result) { if (result.resCode == "0") { layer.alert('添加教学区成功', { icon : 1 }); $('#area-table').bootstrapTable('refreshOptions',{pageNumber:1}); $("#areaModal").modal('hide'); //清除相应缓存,保证操作后数据是最新的 operatorAreaDealCache(); } else { layer.alert('操作失败,原因:' + result.resMsg, { icon : 2 }); } // $("#search_classroom_areaSelector").load(url,data); }); $("#search_classroom_areaSelector").attr("selected","selected"); } } ``` ``` //点击教室管理tab页 function loadClassrooms() { if(selectClassroomList.length != 0) { selectClassroomList = []; $("#classroom-table").bootstrapTable('removeAll'); $("#classroom-table").bootstrapTable("refresh"); } else { getClassroomList(); } } ``` ``` //填充教学区下拉列表 function getAllAreaSelector() { if (isFristGetAllAreaSelector) { $("#operator_schoolAreaSelector").selectpicker({ noneSelectedText: '请选择',//默认显示内容 size: 5 }); //数据赋值 //var select = $("#schoolAreaSelector"); var html = ""; var url = "/school/schoolArea/list"; var data = {"rows": -1}; $.post(url, data, function (result) { if (result.resCode == "0") { var areaList = result.rows; for (var i = 0; i < areaList.length; i++) { html += "<option value='" + areaList[i].areaId + "'>" + areaList[i].areaName + "</option>"; } $("#operator_schoolAreaSelector").append(html); $('#operator_schoolAreaSelector').selectpicker('refresh'); //初始化刷新数据 isFristGetAllAreaSelector = false; } }); } } ``` ``` //添加一个教学区 function addArea() { var areaName = $("#operator_areaName").val(); if (areaName == '') { layer.msg("教学区名称不能为空", { time : 1500, icon : 2 }); return; } else { // 发送请求 var url = "/school/schoolArea/add"; var data = { "areaName" : areaName }; $.post(url, data, function(result) { if (result.resCode == "0") { layer.alert('添加教学区成功', { icon : 1 }); $('#area-table').bootstrapTable('refreshOptions',{pageNumber:1}); $("#areaModal").modal('hide'); //清除相应缓存,保证操作后数据是最新的 operatorAreaDealCache(); } else { layer.alert('操作失败,原因:' + result.resMsg, { icon : 2 }); } // $("#search_classroom_areaSelector").load(url,data); }); $("#search_classroom_areaSelector").attr("selected","selected"); } } ```
急!在html页面jQuery从下拉菜单获取选中项的ID怎么做
我做的html页面 select下拉菜单的名字和id是从数据库读过来的 现在在添加操作的时候 我怎么获取这个动态下拉菜单选中项的ID??? 急
jquery ajax 请求,如何让它加载一次请求
目的是在页面div中插入ajax返回的数据。 每次请求点击按钮触发ajax,想添加一个表单,如何做? 我用的是append,每次按钮触发ajax,都会在后面追加一个,如果点击三次,出现三个相同的数据,这个问题怎么解决??
关于jquery的事件在手机浏览器上的触摸问题
假设根据后台返回的数据动态生成了个div: [code="java"]<div class="title">Title</div>[/code] 对这个div添加click事件,因为是动态生成的,所以使用live: [code="java"] $('div.title').live('click', function(){ ..... }) [/code] 这样在手机浏览器上无法触发该click事件,后google了下改用 [code="java"] $('div.title').live('touchstart', function(){ ..... }) [/code] 可以触发事件,但是当我想手指移动页面时如果正好点在这个div的时候就出发这个事件了,请问如何在手机端将触摸和触摸移动分开? 谢谢
jquery 动态生成几个页面,其中一个页面不能显示
只能显示全部和酒店的页面,航空的那个不能加载到动态生成的数据 ``` <!--首页,默认为全部--> <div data-role="page" id="index" > <div style="overflow: hidden;" data-role="header" data-position="fixed"> <h1>首页</h1> <a class="ui-btn-right" href="#" data-icon="gear">Options</a> <div data-role="navbar" style="background-color:silver;"> <ul> <li><a href="#index">全部</a></li> <li><a href="#hotel">酒店</a></li> <li><a href="#airline">航空</a></li> </ul> </div> </div> <div data-role="content"><ul data-role="listview" id="all" ></ul></div> <div style="overflow: hidden;" data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#index">首页</a></li> <li><a href="#">促销</a></li> <li><a href="#">日历</a></li> <li><a href="setting.html" rel="external">设置</a></li> </ul> </div> </div> </div> <!--酒店--> <div data-role="page" id="hotel"> <div style="overflow: hidden;" data-role="header" data-position="fixed"> <h1>酒店</h1> <div data-role="navbar" style="background-color:silver;"> <ul> <li><a href="#index">全部</a></li> <li><a href="#hotel">酒店</a></li> <li><a href="#airline">航空</a></li> </ul> </div> </div> <div data-role="content"><ul data-role="listview" id="hotel_"></ul></div> <div style="overflow: hidden;" data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#index">首页</a></li> <li><a href="#">促销</a></li> <li><a href="#">日历</a></li> <li><a href="setting.html" rel="external">设置</a></li> </ul> </div> </div> </div> <!--航空--> <div data-role="page" id="airline"> <div style="overflow: hidden;" data-role="header" data-position="fixed"> <h1>航空</h1> <div data-role="navbar" style="background-color:silver;"> <ul> <li><a href="#index">全部</a></li> <li><a href="#hotel">酒店</a></li> <li><a href="#airline">航空</a></li> </ul> </div> </div> <div data-role="content"><ul data-role="listview" id="airline_"></ul></div> <div style="overflow: hidden;" data-role="footer" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="#index">首页</a></li> <li><a href="#">促销</a></li> <li><a href="#">日历</a></li> <li><a href="setting.html" rel="external">设置</a></li> </ul> </div> </div> </div> ``` ``` $.ajax({ url: "" , type: 'GET', dataType: 'XML',//here success: function (data) { //生成全部列表 all = $('#all'); var iHtml = ''; hotel = $('#hotel_'); var iHtml_h = ''; airline = $('#airline_'); var iHtml_a = ''; $(data).find("record").each( function () { pid = $(this).children("pid").text(); flag = $(this).children("flag").text(); iHtml += '<li style="list-style-type:none;"><div style="vertical-align:middle;float:left;font-size:8%"><img style="margin-bottom: -4px;width: 14%" src="css/images/Hotel@2x.png" /><span> 酒店集团</span></div>' + ' <div style="vertical-align:middle;float:right;font-size:8%"> <img style="margin-bottom: -4px;width:25%" src="css/images/Point@2x.png" />12345</div><br />' + '<div> <a href="#" onclick="getcard_details(' + pid + ');"><img style=" margin: 0 0 -45% 0; overflow: hidden;" id="' + pid + '" width="100%" src=' + card_img + 'aid:' + pid + '_display:1></a></div>' + '</li>'; //生成酒店列表 if (flag == 1) { iHtml_h += '<li style="list-style-type:none;"><div style="vertical-align:middle;float:left;font-size:8%"><img style="margin-bottom: -4px;width: 14%" src="css/images/Hotel@2x.png" /><span> 酒店集团</span></div>' + ' <div style="vertical-align:middle;float:right;font-size:8%"> <img style="margin-bottom: -4px;width:25%" src="css/images/Point@2x.png" />12345</div><br />' + '<div> <a href="#" onclick="getcard_details(' + pid + ');"><img style=" margin: 0 0 -45% 0; overflow: hidden;" id="' + pid + '" width="100%" src=' + card_img + 'aid:' + pid + '_display:1></a></div>' + '</li>'; } //生成航空列表 if (flag == 2) { iHtml_a += '<li style="list-style-type:none;"><div style="vertical-align:middle;float:left;font-size:8%"><img style="margin-bottom: -4px;width: 14%" src="css/images/Hotel@2x.png" /><span> 酒店集团</span></div>' + ' <div style="vertical-align:middle;float:right;font-size:8%"> <img style="margin-bottom: -4px;width:25%" src="css/images/Point@2x.png" />12345</div><br />' + '<div> <a href="#" onclick="getcard_details(' + pid + ');"><img style=" margin: 0 0 -45% 0; overflow: hidden;" id="' + pid + '" width="100%" src=' + card_img + 'aid:' + pid + '_display:1></a></div>' + '</li>'; } }) iHtml += '<a class="ui-btn" href="#">+添加更多</a>'; all.html(iHtml).listview('refresh'); iHtml_h += '<a class="ui-btn" href="#">+添加更多</a>'; hotel.html(iHtml_h).listview('refresh'); iHtml_a += '<a class="ui-btn" href="#">+添加更多</a>'; airline.html(iHtml_a).listview('refresh'); // } }) ```
jquery中如何在页面加载的时候根据action中的值的长度动态生成div
我action中的数据是保存在json中,然后要根据数据记录数生成多个div, ``` //门店信息信息加载 $.ajax({ url:"findAllStoreInfoAction.action?workDate="+showCurrentTime(), dataType:"json", type:"POST", async:false, success: function (date){ var json = eval(date); $.each(json, function(i, n){ createStoreDiv(json); }) } }) }); //动态创建div function createStoreDiv(jsonData){ console.info("nihao div"); //将actvColumns复制为空 $("#actvColumns").html(''); //循环action传来的jsonData中的数据 $.each(jsonData,function(i){ var storeName = jsonData[i].storeName; //门店名称 var address = jsonData[i].add_Detail; //地址 var status = jsonData[i].status; //状态 console.info(storeName+" n "+address+status); if(i >= 6){ //动态追加div $("#actvColumns").append("<div class='left' style='background-color: #68019a;'></div>" +"<div class='actColumnName' id='store"+i+"'>"+storeName+"</div>" +"<div class='actColumnNum'>" +" <span style='font-weight: bold; font-size: 12px'>20</span> <span" +" style='color: #333; font-size: 12px'>场</span>" +"</div>" +"<div class='pos'>" +" <span style='font-size: 10px; margin-left: 15px;'>"+address+"</span>" +"</div>" +"<div class='topRight' style='background-color: #68019a;'>"+status+"</div>" +"<a><img src='images/institu/editAct.png'></a>"); }else{ //如果i大于6条 退出each循环,下面用分页显示 return false; } }) ``` 各给大神帮帮忙啊
ajax返回数据给select标签添加问题
通过ajax从数据库把数据返回到页面,并添加到select标签中,然后通过选择器选出option值为指定的值被默认选中![图片说明](https://img-ask.csdn.net/upload/201901/04/1546596968_636191.png)
在jsp中添加数据时怎样验证重复?
在jsp页面中,有一个添加的表单,有几个文本框,在输入数据时,怎样验证输入的数据是否数据库中已经存在,如果有,提示一下。,求教,有代码最好
网页加载时候的样式问题
![图片说明](https://img-ask.csdn.net/upload/201603/05/1457168627_654876.png) 我用jquery让jsp页面加载进来默认选中 全部时长 当点击其他选项的时候 ![图片说明](https://img-ask.csdn.net/upload/201603/05/1457168750_828606.png) 选中的项添加样式 其他的项 删除样式 可我的页面 点击链接后 又重新加载一遍 虽然查询出来的数据是对 但是 又默认选中 全部时长 不是你点击的条件项
动态规划入门到熟悉,看不懂来打我啊
持续更新。。。。。。 2.1斐波那契系列问题 2.2矩阵系列问题 2.3跳跃系列问题 3.1 01背包 3.2 完全背包 3.3多重背包 3.4 一些变形选讲 2.1斐波那契系列问题 在数学上,斐波纳契数列以如下被以递归的方法定义:F(0)=0,F(1)=1, F(n)=F(n-1)+F(n-2)(n&gt;=2,n∈N*)根据定义,前十项为1, 1, 2, 3...
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?
关于SQL和ORM的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论,感触还是有一些,于是就有了今天这篇文。 声明:本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实,讲道理,所以,请各位看官勿喷。 一、事件起因 关于Mybatis和JPA孰优孰劣的问题,争论已经很多年了。一直也没有结论,毕竟每个人的喜好和习惯是大不相同的。我也看...
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
知乎高赞:文中列举了互联网一线大厂程序员都在用的工具集合,涉及面非常广,小白和老手都可以进来看看,或许有新收获。
【超详细分析】关于三次握手与四次挥手面试官想考我们什么?
在面试中,三次握手和四次挥手可以说是问的最频繁的一个知识点了,我相信大家也都看过很多关于三次握手与四次挥手的文章,今天的这篇文章,重点是围绕着面试,我们应该掌握哪些比较重要的点,哪些是比较被面试官给问到的,我觉得如果你能把我下面列举的一些点都记住、理解,我想就差不多了。 三次握手 当面试官问你为什么需要有三次握手、三次握手的作用、讲讲三次三次握手的时候,我想很多人会这样回答: 首先很多人会先讲下握...
压测学习总结(1)——高并发性能指标:QPS、TPS、RT、吞吐量详解
一、QPS,每秒查询 QPS:Queries Per Second意思是“每秒查询率”,是一台服务器每秒能够相应的查询次数,是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准。互联网中,作为域名系统服务器的机器的性能经常用每秒查询率来衡量。 二、TPS,每秒事务 TPS:是TransactionsPerSecond的缩写,也就是事务数/秒。它是软件测试结果的测量单位。一个事务是指一...
新程序员七宗罪
当我发表这篇文章《为什么每个工程师都应该开始考虑开发中的分析和编程技能呢?》时,我从未想到它会对读者产生如此积极的影响。那些想要开始探索编程和数据科学领域的人向我寻求建议;还有一些人问我下一篇文章的发布日期;还有许多人询问如何顺利过渡到这个职业。我非常鼓励大家继续分享我在这个旅程的经验,学习,成功和失败,以帮助尽可能多的人过渡到一个充满无数好处和机会的职业生涯。亲爱的读者,谢谢你。 -罗伯特。 ...
活到老,学到老,程序员也该如此
全文共2763字,预计学习时长8分钟 图片来源:Pixabay 此前,“网传阿里巴巴要求尽快实现P8全员35周岁以内”的消息闹得沸沸扬扬。虽然很快被阿里辟谣,但苍蝇不叮无缝的蛋,无蜜不招彩蝶蜂。消息从何而来?真相究竟怎样?我们无从而知。我们只知道一个事实:不知从何时开始,程序猿也被划在了“吃青春饭”行业之列。 饱受“996ICU”摧残后,好不容易“头秃了变强了”,即将步入为“高...
Vue快速实现通用表单验证
本文开篇第一句话,想引用鲁迅先生《祝福》里的一句话,那便是:“我真傻,真的,我单单知道后端整天都是CRUD,我没想到前端整天都是Form表单”。这句话要从哪里说起呢?大概要从最近半个月的“全栈工程师”说起。项目上需要做一个城市配载的功能,顾名思义,就是通过框选和拖拽的方式在地图上完成配载。博主选择了前后端分离的方式,在这个过程中发现:首先,只要有依赖jQuery的组件,譬如Kendoui,即使使用...
2019年Spring Boot面试都问了什么?快看看这22道面试题!
Spring Boot 面试题 1、什么是 Spring Boot? 2、Spring Boot 有哪些优点? 3、什么是 JavaConfig? 4、如何重新加载 Spring Boot 上的更改,而无需重新启动服务器? 5、Spring Boot 中的监视器是什么? 6、如何在 Spring Boot 中禁用 Actuator 端点安全性? 7、如何在自定义端口上运行 Sprin...
Java 数据持久化系列之JDBC
前段时间小冰在工作中遇到了一系列关于数据持久化的问题,在排查问题时发现自己对 Java 后端的数据持久化框架的原理都不太了解,只有不断试错,因此走了很多弯路。于是下定决心,集中精力学习了持久化相关框架的原理和实现,总结出这个系列。 上图是我根据相关源码和网上资料总结的有关 Java 数据持久化的架构图(只代表本人想法,如有问题,欢迎留言指出)。最下层就是今天要讲的 JDBC,上一层是数据库连接池...
高性能分布式缓存的设计原理
又是一个没有开工红包的公司!!! 问题分析 通过以上对话,各位是否能够猜到所有缓存穿透的原因呢?回答之前我们先来看一下缓存策略的具体代码 缓存服务器IP=hash(key)%服务器数量 这里还要多说一句,key的取值可以根据具体业务具体设计。比如,我想要做负载均衡,key可以为调用方的服务器IP;获取用户信息,key可以为用户ID;等等。 在服务器数量不变的情况下,以上设计没有问题。但是...
带你涨姿势的认识一下 Kafka 消费者
之前我们介绍过了 Kafka 整体架构,Kafka 生产者,Kafka 生产的消息最终流向哪里呢?当然是需要消费了,要不只产生一系列数据没有任何作用啊,如果把 Kafka 比作餐厅的话,那么生产者就是厨师的角色,消费者就是客人,只有厨师的话,那么炒出来的菜没有人吃也没有意义,如果只有客人没有厨师的话,谁会去这个店吃饭呢?!所以如果你看完前面的文章意犹未尽的话,可以继续让你爽一爽。如果你没看过前面的...
小白学 Python 爬虫(5):前置准备(四)数据库基础
人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Linux基础入门 小白学 Python 爬虫(4):前置准备(三)Docker基础入门 本篇文章,我们接着介绍基础内容,数据库。 爬虫将数据爬取完成后,总要有地方存放吧,这个数据存在哪里呢? ...
阿里P8数据架构师:顶级开发者都在用什么数据库?
其实从去年已经隐隐约约感觉到数据库的有变化,只是没有想到变得这么快。今年的一些事情实实在在地给了某些数据库重击,如果以前去某数据库还是喊喊,然后该用还用,今年从传统领域刮起的去某数据库的风,已经开始了,并且后面的乌云密布也看得见。 最近看一篇国外的开源产品提供厂商的一篇文字,主要是在询问了他的几百位客户后得出了下图中的2019年数据库的使用趋势。 从图中可以看出,MySQL以38.9...
面试官:关于Java性能优化,你有什么技巧
通过使用一些辅助性工具来找到程序中的瓶颈,然后就可以对瓶颈部分的代码进行优化。 一般有两种方案:即优化代码或更改设计方法。我们一般会选择后者,因为不去调用以下代码要比调用一些优化的代码更能提高程序的性能。而一个设计良好的程序能够精简代码,从而提高性能。 下面将提供一些在JAVA程序的设计和编码中,为了能够提高JAVA程序的性能,而经常采用的一些方法和技巧。 1.对象的生成和大小的调整。 J...
互联网公司分布式系统架构演进之路
介绍 分布式和集群的概念经常被搞混,现在一句话让你明白两者的区别。 分布式:一个业务拆分成多个子业务,部署在不同的服务器上 集群:同一个业务,部署在多个服务器上 例如:电商系统可以拆分成商品,订单,用户等子系统。这就是分布式,而为了应对并发,同时部署好几个用户系统,这就是集群 1 单应用架构 2 应用服务器和数据库服务器分离 单机负载越来越来,所以要将应用服务器和数据库服务器分离 3 应用服务...
为什么你的高效交付,却没有好的业务成果?
作者| 彭鑫(公亮) 出品|阿里巴巴新零售淘系技术部 11月中旬,作者在 TOP 100 案例和人人都是产品经理的两次大会上分别进行了两场关于价值交付的分享,结合分享后的反馈焦点,立足业务整体交付的价值最大化,特产此文。 持续需求交付的痛点 ▶没有价值的交付等于没有交付 随着敏捷方法的普及,越来越多的团队引入了敏捷以推动业务的快速迭代、小步快跑、及时的响应市场变化。在各种敏捷框架...
快速搭建 SpringCloud 微服务开发环境的脚手架
本文适合有 SpringBoot 和 SpringCloud 基础知识的人群,跟着本文可使用和快速搭建 SpringCloud 项目。本文作者:HelloGitHub-秦...
JavaScript 中, 5 种增加代码可读性的最佳实践
作者:Milos Protic 译者:前端小智 来源:blog.risingstack 为了保证的可读性,本文采用意译而非直译。 简介 如果咱们关注代码本身结构及可读笥,而不是只关心它是否能工作,那么咱们写代码是有一定的水准。专业开发人员将为未来的自己和“其他人”编写代码,而不仅仅只编写能应付当前工作的代码。 在此基础上,可读性高的代码可以定义为自解释的、易于人理解的、易于更改...
Java 9 ← 2017,2019 → Java 13 ,来看看Java两年来的变化
距离 2019 年结束,只剩下 10 几天了。你做好准备迎接 2020 年了吗? 一到年底,人就特别容易陷入回忆和比较之中,比如说这几天, 的对比挑战就火了! 这个话题登上了微博的热搜榜,也刷爆了朋友圈,人们纷纷晒出自己2017和2019的照片对比。 作为一个技术宅,我也做了一个对比: 2017 年 9 月 21 日,Java 9 正式发布,并且在2017年8月,JCP执行委员会提出将J...
【图解算法面试】记一次面试:说说游戏中的敏感词过滤是如何实现的?
版权声明:本文为苦逼的码农原创。未经同意禁止任何形式转载,特别是那些复制粘贴到别的平台的,否则,必定追究。欢迎大家多多转发,谢谢。 小秋今天去面试了,面试官问了一个与敏感词过滤算法相关的问题,然而小秋对敏感词过滤算法一点也没听说过。于是,有了下下事情的发生… 面试官开怼 面试官:玩过王者荣耀吧?了解过敏感词过滤吗?,例如在游戏里,如果我们发送“你在干嘛?麻痹演员啊你?”,由于“麻痹”是一个敏感词,...
程序员需要了解的硬核知识之汇编语言(一)
之前的系列文章从 CPU 和内存方面简单介绍了一下汇编语言,但是还没有系统的了解一下汇编语言,汇编语言作为第二代计算机语言,会用一些容易理解和记忆的字母,单词来代替一个特定的指令,作为高级编程语言的基础,有必要系统的了解一下汇编语言,那么本篇文章希望大家跟我一起来了解一下汇编语言。 汇编语言和本地代码 我们在之前的文章中探讨过,计算机 CPU 只能运行本地代码(机器语言)程序,用 C 语言等高级语...
OpenCV-Python 绘图功能 | 七
目标 学习使用OpenCV绘制不同的几何形状 您将学习以下功能:cv.line(),cv.circle(),cv.rectangle(),cv.ellipse(),cv.putText()等。 代码 在上述所有功能中,您将看到一些常见的参数,如下所示: img:您要绘制形状的图像 color:形状的颜色。对于BGR,将其作为元组传递,例如:(255,0,0)对于蓝色。对于灰度,只需传递...
GitHub 标星 1.6w+,我发现了一个宝藏项目,作为编程新手有福了!
大家好,我是 Rocky0429,一个最近老在 GitHub 上闲逛的蒟蒻… 特别惭愧的是,虽然我很早就知道 GitHub,但是学会逛 GitHub 的时间特别晚。当时一方面是因为菜,看着这种全是英文的东西难受,不知道该怎么去玩,另一方面是一直在搞 ACM,没有做一些工程类的项目,所以想当然的以为和 GitHub 也没什么关系(当然这种想法是错误的)。 后来自己花了一个星期看完了 Pyt...
Java知识体系最强总结(2020版)
更新于2019-12-15 10:38:00 本人从事Java开发已多年,平时有记录问题解决方案和总结知识点的习惯,整理了一些有关Java的知识体系,这不是最终版,会不定期的更新。也算是记录自己在从事编程工作的成长足迹,通过博客可以促进博主与阅读者的共同进步,结交更多志同道合的朋友。特此分享给大家,本人见识有限,写的博客难免有错误或者疏忽的地方,还望各位大佬指点,在此表示感激不尽。 文章目录...
计算机专业的书普遍都这么贵,你们都是怎么获取资源的?
介绍几个可以下载编程电子书籍的网站。 1.Github Github上编程书资源很多,你可以根据类型和语言去搜索。推荐几个热门的: free-programming-books-zh_CN:58K 星的GitHub,编程语言、WEB、函数、大数据、操作系统、在线课程、数据库相关书籍应有尽有,共有几百本。 Go语言高级编程:涵盖CGO,Go汇编语言,RPC实现,Protobuf插件实现,Web框架实...
毕业5年,我问遍了身边的大佬,总结了他们的学习方法
我问了身边10个大佬,总结了他们的学习方法,原来成功都是有迹可循的。
相关热词 c# id读写器 c#俄罗斯方块源码 c# linq原理 c# 装箱有什么用 c#集合 复制 c# 一个字符串分组 c++和c#哪个就业率高 c# 批量动态创建控件 c# 模块和程序集的区别 c# gmap 截图
立即提问