第八章 jQuery与Ajax应用

　　Ajax(Asynchronous JavaScript and XML)，异步JavaScript和XML，它实现的无刷新更新页面，能够进行异步提交。

　　jQuery对Ajax进行了封装，最底层的是$.ajax()方法，第二层是$.load()，$.get()，$.post()方法，第三层是$.getScript()，$.getJSON()方法。

　　1. $.load()方法，能载入远程HTML代码插入到DOM中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

* { margin:0; padding:0;}

body { font-size:12px;}

.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}

.comment h6 { font-weight:700; font-size:14px;}

.para { margin-top:5px; text-indent:2em;background:#DDD;}

</style>

 <!--   引入jQuery -->

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

  $(function(){

      $("#send").click(function(){

              $("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){

                         alert( $(this).html() );    //在这里this指向的是当前的DOM对象，即 $("#iptText")[0]

                         alert(responseText);       //请求返回的内容

                         alert(textStatus);            //请求状态：success，error

                         alert(XMLHttpRequest);     //XMLHttpRequest对象

            });

      })

  })

</script>

</head>

<body>

<input type="button" id="send" value="Ajax获取" />

<div  class="comment">

    已有评论：

</div>

<div id="resText" ></div>

</body>

</html>

　　2. $.get()与$.post()方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

* { margin:0; padding:0;}

body { font-size:12px;}

.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}

.comment h6 { font-weight:700; font-size:14px;}

.para { margin-top:5px; text-indent:2em;background:#DDD;}

</style>

 <!--   引入jQuery -->

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script language="javascript" >

    $(function(){

       $("#send").click(function(){

            $.get("get.aspx", { 

                        username :  $("#username").val() , 

                        content :  $("#content").val()  

                    }, function (data, textStatus){

                        var username = data.username;

                        var content = data.content;

                        var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";

                        $("#resText").html(txtHtml); // 把返回的数据添加到页面上

                    },"json");

       })

    })

</script>

</head>

<body>

<form id="form1">

<p>评论:</p>

 <p>姓名: <input type="text" name="username" id="username" /></p>

 <p>内容: <textarea name="content" id="content" ></textarea></p>

 <p><input type="button" id="send" value="提交"/></p>

</form>

<div  class='comment'>已有评论：</div>

<div id="resText" >

</div>

</body>

</html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

* { margin:0; padding:0;}

body { font-size:12px;}

.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}

.comment h6 { font-weight:700; font-size:14px;}

.para { margin-top:5px; text-indent:2em;background:#DDD;}

</style>

 <!--   引入jQuery -->

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script language="javascript" >

    $(function(){

       $("#send").click(function(){

            $.post("post.aspx", { 

                        username :  $("#username").val() , 

                        content :  $("#content").val()  

                    }, function (data, textStatus){

                        var username = data.username;

                        var content = data.content;

                        var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";

                        $("#resText").html(txtHtml); // 把返回的数据添加到页面上

                    },"json");

       })

    })

</script>

</head>

<body>

<form id="form1">

<p>评论:</p>

 <p>姓名: <input type="text" name="username" id="username" /></p>

 <p>内容: <textarea id="content" ></textarea></p>

 <p><input type="button" id="send" value="提交"/></p>

</form>

<div  class='comment'>已有评论：</div>

 <div id="resText" >

 </div>

</body>

</html>

　　3. $.getScript()与$.getJSON()方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

* { margin:0; padding:0;}

body { font-size:12px;}

.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}

.comment h6 { font-weight:700; font-size:14px;}

.para { margin-top:5px; text-indent:2em;background:#DDD;}

</style>

 <!--   引入jQuery -->

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

 <script>

   $(function(){

        $('#send').click(function() {

             $.getScript('test.js');

        });

   })

   </script>

</head>

<body>

 <br/>

 <p>

     <input type="button" id="send" value="加载"/>

 </p>

<div  class="comment">已有评论：</div>

 <div id="resText" >    

 </div>

</body>

</html>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

* { margin:0; padding:0;}

body { font-size:12px;}

.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}

.comment h6 { font-weight:700; font-size:14px;}

.para { margin-top:5px; text-indent:2em;background:#DDD;}

</style>

 <!--   引入jQuery -->

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

 <script>

   $(function(){

        $('#send').click(function() {

             $.getJSON('test.json', function(data) {

                 $('#resText').empty();

                  var html = '';

                  $.each( data  , function(commentIndex, comment) {

                      html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';

                  })

                 $('#resText').html(html);

            })

       })

   })

   </script>

</head>

<body>

 <br/>

 <p>

     <input type="button" id="send" value="加载"/>

 </p>

<div  class="comment">已有评论：</div>

 <div id="resText" >    

 </div>

</body>

</html>

　　4. $.ajax()方法

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

* { margin:0; padding:0;}

body { font-size:12px;}

.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}

.comment h6 { font-weight:700; font-size:14px;}

.para { margin-top:5px; text-indent:2em;background:#DDD;}

</style>

 <!--   引入jQuery -->

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

 <script>

   $(function(){

        $('#send').click(function() {

            $.ajax({

              type: "GET",

              url: "test.json",

              dataType: "json",

              success : function(data){

                     $('#resText').empty();

                      var html = '';

                      $.each( data  , function(commentIndex, comment) {

                          html += '<div class="comment"><h6>' + comment['username'] + ':</h6><p class="para">' + comment['content'] + '</p></div>';

                      })

                     $('#resText').html(html);

              }

            }); 

        });

   })

   </script>

</head>

<body>

 <br/>

 <p>

     <input type="button" id="send" value="加载"/>

 </p>

<div  class="comment">已有评论：</div>

 <div id="resText" >

 </div>

</body>

</html>

　　5. serialize()方法，序列化元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

* { margin:0; padding:0;}

body { font-size:12px;}

.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}

.comment h6 { font-weight:700; font-size:14px;}

.para { margin-top:5px; text-indent:2em;background:#DDD;}

</style>

 <!--   引入jQuery -->

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script language="javascript" >

    $(function(){

       $("#send").click(function(){

            $.get("get.aspx", $("#form1").serialize() , function (data, textStatus){

                        $("#resText").html(data); // 把返回的数据添加到页面上

                    }

            );

       })

    })

</script>

</head>

<body>

<form id="form1">

<p>评论:</p>

 <p>姓名: <input type="text" name="username" id="username" /></p>

 <p>内容: <textarea name="content" id="content" ></textarea></p>

 <p><input type="button" id="send" value="提交"/></p>

</form>

<div  class='comment'>已有评论：</div>

<div id="resText" >

</div>

</body>

</html>

 　　6. AjaxEvent 全局事件

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

* { margin:0; padding:0;}

body { font-size:12px;}

#loading{

    width:80px;

    height: 20px;

    background:#bbb;

    color:#000;

    display:none;

}

img{border:0;height:100px;width:100px;}

.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}

.comment h6 { font-weight:700; font-size:14px;}

.para { margin-top:5px; text-indent:2em;background:#DDD;}

</style>

 <!--   引入jQuery -->

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

 <script>

   $(function(){

    //demo1:

        $('#send1').click(function() {

            $.getJSON("test.json",function(data){

                          $("#resText1").empty();

                          $.each(data.items, function( i,item ){

                                $("<img/> ").attr("src", item.media.m ).appendTo("#resText1");

                                if ( i == 3 ) { 

                                    return false;

                                }

                          });

                     }

            ); 

       });



   //demo2:

       $("#send2").click(function(){

            $.get("get.aspx", { 

                        username :  $("#username").val() , 

                        content :  $("#content").val()  

                    }, function (data, textStatus){

                        $("#resText2").html(data); // 把返回的数据添加到页面上

                    }

            );

       })



  //共用这2个全局的ajax事件

       $("#loading").ajaxStart(function(){

          $(this).show();

       });

       $("#loading").ajaxStop(function(){

          $(this).hide();

       });

   })

   </script>

</head>

<body>

<br/>

<div id="loading">加载中...</div>

<br/>

Demo1:

<br/>

<input type="button" id="send1" value="加载"/>

<div id="resText1" ></div>

<br/>

Demo2:

<br/>

<form id="form1">

<p>评论:</p>

 <p>姓名: <input type="text" name="username" id="username" /></p>

 <p>内容: <textarea name="content" id="content" ></textarea></p>

 <p><input type="button" id="send2" value="提交"/></p>

</form>

<div  class='comment'>已有评论：</div>

<div id="resText2" >

</div>

</body>

</html>

PS：参考文献《锋利的jQuery》

 

你可能感兴趣的:(jquery)

  • 基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件 练练科技 java课程设计mysql
    基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件基于Java毕业设计学术会议论文稿件管理系统源码+系统+mysql+lw文档+部署软件本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7
  • java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署 花样1999 mysql数据库java
    java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计web实验室课表管理系统源码+mysql数据库+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQ
  • java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署 沪港 mysqljava数据库
    java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计运动会管理系统源码+mysql数据库+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码
  • ASP.NET MVC5配置百度富文本编辑器 plcc123 ASP.NETMVCc#
    简单说一下，.netMVC5如何配置百度富文本编辑器吧。1、首先去下载百度富文本编辑器2、解压放到项目文件夹Content/ueditor3、在视图里面添加@Scripts.Render("~/bundles/jqueryval","~/Content/ueditor/ueditor.config.js","~/Content/ueditor/editor_api.js","~/Content/u
  • 2021-04-15 一般橙 笔记
    JQuery项目JS模块化分析(一)Jquery在线手册新增一个组件例按钮组件varYIUI=YIUI||{};(function(){//立即执行匿名函数,模拟模块化YIUI.Yes_Button=function(options){//匿名函数表达式varbtntemplate={el:$(""),caption:"按钮",init:function(){varself=this;var$in
  • 阿里云视频点播，基于thinkphp8上传视频 quweiie php阿里云音视频云计算
    前端参考官方示例(jQuery版)阿里云JavaScript上传SDKDemo(使用jquery).container{width:1200px;margin:0auto;}.input-control{margin:5px0;}.input-controllabel{font-size:14px;color:#333;width:30%;text-align:right;display:inli
  • html元素后追加内容,jquery 元素控制(追加元素/追加内容)介绍及应用 王大明白 html元素后追加内容
    一、在元素内部/外部追加元素append,prepend:添加到子元素before，after：作为兄弟元素添加html：在我的后面追加一条新闻Javascript:jQuery(function(){//在元素内部追加内容$("#content").append("姚明退役了...");})在#content里面添加元素，这是把姚明退役了...作为子元素添加到#content，如果想在元素外部追
  • js 使用缓存判断在规定时间内显示一次弹框 洪洪呀 javascript缓存开发语言
    js使用缓存判断在规定时间内显示一次弹框功能拆分，新用户注册完成登录跳转首页，js根据注册时间判断显示一个新手指引的弹窗，只在注册当天登录且显示一次jQuery(document).ready(function($){getWinnerModalShow()});//新手指引functiongetWinnerModalShow(){varwinnerModal=newbootstrap.Modal
  • 使用jQuery、Ajax、ASP和MySQL实现动态加载更多内容 来自日本的亮仔
    本文还有配套的精品资源，点击获取简介：“加载更多”功能改善网页用户体验，适用于大量数据场景。本文将探讨如何通过结合jQuery监听滚动事件、使用Ajax技术与服务器交互、ASP后端处理请求、以及MySQL数据库查询，实现无需刷新页面即可动态加载内容的完整步骤。1.页面滚动事件监听与处理在当今的网络应用中，页面滚动事件是一种常见的用户交互方式，它直接影响到用户体验。监听和处理滚动事件，能够帮助开发者
  • jQuery.ajax weixin_48357623 前端jqueryajax前端
    下面是关于FetchAPI、umi-request、jQuery.ajax和axios的对比表格：FetchAPIumi-requestjQuery.ajaxaxios技术基础基于Promise的现代浏览器API基于fetch的封装，提供统一API和请求层治理原生JavaScript中的XMLHttpRequest封装基于Promise的HTTP客户端，封装XMLHttpRequest使用场景适用
  • Amaze UI web mobile 前端框架 iteye_20240 ui前端框架移动开发
    目录结构index.html-空白HTML模板；blog.html-博客页面模板（预览）；landing.html-LandingPage模板（预览）；login.html-登录界面模板（预览）；sidebar.html-带边栏的文章模板（预览）；在app.css中编写CSS；在app.js中编写JavaScript；移动端首选Zepto，桌面端选jQuery，这应该是大多数开发者的共识。那对于跨
  • （二）用控制器controller给模型数据赋初始值 diandingyin9417 javascriptViewUI
    之前博客，非常easy的就实现了模型数据和页面显示的自己主动绑定。如今我们使用控制器，给模型赋初始值。假设使用jquery来实现变量赋初值，须要在页面载入完毕后运行$("#target").attr("value",selfValue);使用AngularJS代码例如以下：Hello,World!functionWholeController($scope){$scope.yourName="at
  • jQuery 的 data 方法 不识别大小写 GoToDinner 前端
    console.log($(this).data("workState"));//undefinedconsole.log($(this).data("work-state"));//undefinedconsole.log($(this).data("workstate"));//1要么语义都是小写，多个单词可以用'-'字符分隔如data-work-state这样
  • JavaScript Fetch noPermission JavaScriptjavascript前端开发语言
    一、什么是fetch?在前端的发展历程中用于请求网络资源的方式主要有三种：从原生的XMLHttpRequest到jQuery的Ajax再到现在主流的axios，其中Ajax和axios都是对XMLHttpRequest的封装（本质上都是使用XMLHttpRequest方法获取网络资源），这些封装库让开发者对XMLHttpRequest的使用变得更简单高效。然而fetch的推出使开发者对网络资源的异
  • JQuery——一个快速、简洁的JavaScript库 hcolder 前端
    JQueryjQuery是一个快速、简洁的JavaScript库，极大地简化了JavaScript编程。jQuery设计的宗旨是“writeLess，DoMore”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。一、语法和选择器jQuery语法是通过选取HTML元素，并
  • uniapp 开发app使用renderjs操作dom Ho95 uni-app前端
    需求：把页面中的对话内容另存为一张图片保存到手机相册。解决方案：这时我们需要使用到document对象创建一个dom对象计算对话内容的宽高、位置等，再利用canvas能力将内容绘制绘制成一张图保存。现状：总所周知，非H5端，不能使用浏览器自带对象，比如document、window、localstorage、cookie等，更不能使用jquery等依赖这些浏览器对象的框架。uniapp解决方案：u
  • css3+jQuery：两种简单动画实现方式 真实lie jQuerycss3jquerycss3
    css3支持动画animate完整代码（之后只给js部分）：简单动画.rect{width:100px;height:100px;background-color:aqua;margin:50pxauto;}/*动画基本设定*/#rect-1{/*动画名称*/animation-name:an-re1;/*动画时长（一个周期），默认0秒,单位是必要的，s或者ms*/animation-durati
  • jquery的引入与使用（附有HTML5的代码实例） GodGump html复习
    1.引入引入方法有两种：一种本地，一种联网（CDN）。本地的方法：下载并放入项目文件，并用js引入（取决于自己的路径）联网的方法（CDN）：官网jquery压缩版引用地址（以3.0版本为例子，早期请使用2版本，兼容特别老的使用1版本）:百度压缩版引用地址:微软压缩版引用地址:2.使用在如图所示部分（//代码部分）添加代码，至于为什么这么写？因为jQuery的本质是js，将函数封装起来供我们使用，使
  • jQuery编程入门教程 Botiway FlaskWebpythonflaskhtml5css3javascript
    jQuery是一个快速、小巧且功能丰富的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax操作。以下是一个jQuery编程的入门教程，帮助你快速掌握基础知识。1.什么是jQuery？jQuery是一个广泛使用的JavaScript库，旨在简化客户端脚本编写。它的口号是“Writeless,domore”（写得更少，做得更多）。2.安装jQuery方法1：通过CDN引入在HTM
  • java计算机毕业设计校园共享单车系统源代码+系统+数据库+lw文档 荣荣科技 java开发语言jvm
    java计算机毕业设计校园共享单车系统源代码+系统+数据库+lw文档java计算机毕业设计校园共享单车系统源代码+系统+数据库+lw文档本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0源码地址：https://p
  • 探索前端框架的未来：Svelte 的崛起 大梦百万秋 知识学爆前端框架
    引言在前端开发的世界里，框架更新换代的速度仿佛光速。从jQuery到Angular，再到如今大热的React和Vue，开发者们不断追逐更轻量、更快、更易于维护的框架。如今，Svelte正悄然崛起，并引发了关于前端框架未来的热烈讨论。本文将介绍Svelte的独特之处，以及为什么它可能会成为下一个主流前端框架。1.什么是Svelte？Svelte是一个相对年轻的前端框架，由RichHarris开发。与
  • 运维系列&js系列【仅供参考】：jsp 删除前先做短信验证 坦笑&&life javascriptjava开发语言
    jsp删除前先做短信验证jsp删除前先做短信验证摘要正文jsp删除前先做短信验证摘要本文介绍了在前端删除操作前如何通过弹窗进行用户验证，包括短信或邮箱验证。通过检查用户是否勾选待删除项，若未选择则提示用户。同时展示了如何根据用户邮箱和手机号进行显示选项的选择及数据脱敏处理。在JSP环境中，演示了如何使用jQuery操作DOM元素，并展示了.show()和.hide()方法用于元素的显示和隐藏。正文
  • jQuery初体验 Hydra. JavaWeb
    目录JQueryjQuery常用选择器JQuery的事件jQuery中的动画JQuery什么是jQuery？有什么作用？jQuery是目前最流行的JavaScript程序库，它通过封装原生的JavaScript函数的到一整套定义好的方法。jQuery常用选择器标签选择器直接使用html标签名作为选择器$("p")表示选择页面中所有的标签类选择器使用标签的class属性值作为选择器，$(".bth"
  • 集成 pdf.js 批注方案至 jQuery 和 HTML 项目示例代码
    摘要：简单5步完成强大的PDF批注开发包集成部署，包括数据的云端同步。本文章介绍如何集成于jQuery和HTML项目，示例代码完善且简单，复制粘贴即可完成项目的集成。即使不使用文中产品，其他基于pdf.js开发的批注工具也可参考本文集成。1.代码包与Demo1.1代码包结构ElasticPDF基于开源pdf.js，增加了多种开箱即用的PDF批注功能。代码包延续了pdf.js-dist独立且完全离线
  • Integrate pdf.js annotation into jQuery and HTML
    Abstract:Simple5stepstointegratethepowerfulPDFannotationdevelopmentkit,includingcloudserver.ThisarticleintroduceshowtointegrateitintojQueryandHTMLprojects.Thesamplecodeiscompleteandsimple.Youcancomple
  • React ajax（主要记录axios） ☞^O^ react.jsajax前端
    一、前期说明前置说明：1.React本身只关注与界面，并不包含发送ajax请求的代码2.前端应用需要通过ajax请求与后台交互（json数据）3.react应用中需要集成第三方库或自己封装常用的ajax请求库1.jquery：比较重，如果需要另外引入不建议使用2.axio：轻量级，建议使用（1）封装XmlHttpRequest对象的ajax（2）promise风格（3）可以用在浏览器端和node服
  • php解析失败,解决ThinkPHP模板常量解析失败 集成电路科普者
    ThinkPHP在设计时没有考虑过把__XXX__这种模板常量用在一些PHP操作上，比如模板继承、Include标签统统不能用模板常量，比如下面这样ThinkPHP是不解析的，直接过滤掉。其原因有21.URL路径PHP是不认的，PHP引用文件需要文件路径比如引用js文件你可以这样127.0.0.1/nut_shop/Public/jQuery.js而引用PHP文件则需要./Public/nav.h
  • 【技术贴收集】在线预览下载PDF文件 yz-俞祥胜 实用前端插件学习
    借鉴地址：演示地址：http://sources.ikeepstudying.com/jquery.media/pdf.phpGitHub地址：https://github.com/malsup/media/tree/master可以支持PDF文件在线预览、下载。我只是日志记录下，详情请看上面链接听说还支持其他类型媒体文件：播放视频等等插件名称：jquery.media.js使用超级简单：1.引用
  • jEasyUI 创建基础树形网格 lsx202406 开发语言
    jEasyUI创建基础树形网格引言jEasyUI是一个基于jQuery的易于使用的界面框架，它提供了丰富的UI组件，帮助开发者快速构建富有交互性的网页应用。树形网格（TreeGrid）是jEasyUI提供的一个特殊网格，它结合了树形结构的层级和表格的列数据展示，非常适合展示具有层级关系的数据。本文将详细介绍如何使用jEasyUI创建一个基础的树形网格。准备工作在开始之前，请确保已经引入了jEasy
  • 大学生HTML期末大作业——HTML+CSS+JavaScript美食网站（西餐） 无·糖 Web前端期末大作业html课程设计css大学生javascript美食大作业
    HTML+CSS+JS【美食网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计文章目录一、网站题目二、网站描述三、网站介绍四、网站效果五、️网站代码六、️‍如何学习进步七、‍☠️更多干货文章目录一、网站题目美食网站（西餐）精美响应式含JQuery7页二、网站描述总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单
  • jdk tomcat 环境变量配置 Array_06 javajdktomcat
    Win7 下如何配置java环境变量 1。准备jdk包，win7系统，tomcat安装包（均上网下载即可） 2。进行对jdk的安装，尽量为默认路径（但要记住啊！！以防以后配置用。。。） 3。分别配置高级环境变量。   电脑-->右击属性-->高级环境变量-->环境变量。 分别配置 : path    &nbs
  • Spring调SDK包报java.lang.NoSuchFieldError错误 bijian1013 javaspring
            在工作中调另一个系统的SDK包，出现如下java.lang.NoSuchFieldError错误。 org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l
  • LeetCode[位运算] - #136 数组中的单一数 Cwind java题解位运算LeetCodeAlgorithm
    原题链接：#136 Single Number 要求： 给定一个整型数组，其中除了一个元素之外，每个元素都出现两次。找出这个元素 注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间 难度：中等 分析： 题目限定了线性的时间复杂度，同时不使用额外的空间，即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n，故将数组中的每个元素进
  • qq登陆界面开发 15700786134 qq
    今天我们来开发一个qq登陆界面，首先写一个界面程序，一个界面首先是一个Frame对象，即是一个窗体。然后在这个窗体上放置其他组件。代码如下： public class First {         public void initul(){        jf=ne
  • Linux的程序包管理器RPM 被触发 linux
    在早期我们使用源代码的方式来安装软件时，都需要先把源程序代码编译成可执行的二进制安装程序，然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装，这个复杂而艰辛的过程。为简化安装步骤，便于广大用户的安装部署程序，程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包，提供给大家下载，我们只需要根据自己的
  • socket通信遇到EOFException 肆无忌惮_ EOFException
    java.io.EOFException at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281) at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:
  • 基于spring的web项目定时操作 知了ing javaWeb
    废话不多说，直接上代码，很简单 配置一下项目启动就行 1，web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="h
  • 树形结构的数据库表Schema设计 矮蛋蛋 schema
    原文地址： http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488     程序设计过程中，我们常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等，通常而言，这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库，都是以二维表的形式记录存储数据信息，
  • maven将jar包和源码一起打包到本地仓库 alleni123 maven
    http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository <project> ... <build> <plugins> <plugin> <groupI
  • java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！ 百合不是茶
    类 File File是指文件和目录路径名的抽象表示形式。 1，何为文件： 标准文件（txt doc mp3...） 目录文件（文件夹） 虚拟内存文件   2，File类中有可以创建文件的 createNewFile（）方法,在创建新文件的时候需要try{} catch(）{}因为可能会抛出异常；也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都
  • Spring注入有继承关系的类（2） bijian1013 javaspring
    被注入类的父类有相应的属性，Spring可以直接注入相应的属性，如下所例：1.AClass类 package com.bijian.spring.test4; public class AClass { private String a; private String b; public String getA() { retu
  • 30岁转型期你能否成为成功人士 bijian1013 成长励志
            很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人
  • 【Velocity四】Velocity与Java互操作 bit1129 velocity
    Velocity出现的目的用于简化基于MVC的web应用开发，用于替代JSP标签技术，那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础，      POJO    package com.tom.servlets; public
  • 【Hive十一】Hive数据倾斜优化 bit1129 hive
    什么是Hive数据倾斜问题   操作：join,group by,count distinct 现象：任务进度长时间维持在99%（或100%），查看任务监控页面，发现只有少量（1个或几个）reduce子任务未完成；查看未完成的子任务，可以看到本地读写数据量积累非常大，通常超过10GB可以认定为发生数据倾斜。 原因：key分布不均匀 倾斜度衡量：平均记录数超过50w且
  • 在nginx中集成lua脚本：添加自定义Http头，封IP等 ronin47 nginx lua csrf
    Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 location /{
  • java-3.求子数组的最大和 bylijinnan java
    package beautyOfCoding; public class MaxSubArraySum { /** * 3.求子数组的最大和 题目描述： 输入一个整形数组，数组里有正数也有负数。 数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。 求所有子数组的和的最大值。要求时间复杂度为O(n)。 例如输入的数组为1, -2, 3, 10, -4,
  • Netty源码学习-FileRegion bylijinnan javanetty
    今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java 可以直接往channel里面写入一个FileRegion对象，而不需要相应的encoder： //pipeline（没有诸如“FileRegionEncoder”的handler）： public ChannelPipeline ge
  • 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题 cngolon 跨浏览器复制到粘贴板Zero Clipboard
    Zero Clipboard的实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js
  • 单例模式 cuishikuan 单例模式
    第一种（懒汉，线程不安全）： public class Singleton {   2     private static Singleton instance;   3     pri
  • spring+websocket的使用 dalan_123
    一、spring配置文件 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.or
  • 细节问题：ZEROFILL的用法范围。 dcj3sjt126com mysql
    1、zerofill把月份中的一位数字比如1，2，3等加前导0 mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL,    -> day
  • Android开发10——Activity的跳转与传值 dcj3sjt126com Android开发
    Activity跳转与传值，主要是通过Intent类，Intent的作用是激活组件和附带数据。   一、Activity跳转 方法一Intent intent = new Intent(A.this, B.class); startActivity(intent)   方法二Intent intent = new Intent();intent.setCla
  • jdbc 得到表结构、主键 eksliang jdbc 得到表结构、主键
    转自博客：http://blog.csdn.net/ocean1010/article/details/7266042 假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt
  • Android 应用程序开关GPS gqdy365 android
    要在应用程序中操作GPS开关需要权限： <uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" /> 但在配置文件中添加此权限之后会报错，无法再eclipse里面正常编译，怎么办？ 1、方法一：将项目放到Android源码中编译； 2、方法二：网上有人说cl
  • Windows上调试MapReduce zhiquanliu mapreduce
    1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b
  • 如何看待一些知名博客推广软文的行为？ justjavac 博客
    本文来自我在知乎上的一个回答：http://www.zhihu.com/question/23431810/answer/24588621 互联网上的两种典型心态： 当初求种像条狗，如今撸完嫌人丑 当初搜贴像条犬，如今读完嫌人软 你为啥感觉不舒服呢？ 难道非得要作者把自己的劳动成果免费给你用，你才舒服？ 就如同 Google 关闭了 Gooled Reader，那是
  • sql优化总结 macroli sql
    为了是自己对sql优化有更好的原则性，在这里做一下总结，个人原则如有不对请多多指教。谢谢！   要知道一个简单的sql语句执行效率，就要有查看方式，一遍更好的进行优化。   一、简单的统计语句执行时间 declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id
  • Linux Oracle中常遇到的一些问题及命令总结 超声波 oraclelinux
    1.linux更改主机名   (1)#hostname oracledb　　　　临时修改主机名 (2) vi /etc/sysconfig/network 　　修改hostname (3) vi /etc/hosts　　　　　　　　修改IP对应的主机名   2.linux重启oracle实例及监听的各种方法 （注意操作的顺序应该是先监听，后数据库实例） &nbs
  • hive函数大全及使用示例 superlxw1234 hadoophive函数
      具体说明及示例参 见附件文档。     文档目录：   目录 一、关系运算： 4 1. 等值比较: = 4 2. 不等值比较: <> 4 3. 小于比较: < 4 4. 小于等于比较: <= 4 5. 大于比较: > 5 6. 大于等于比较: >= 5 7. 空值判断: IS NULL 5
  • Spring 4.2新特性-使用@Order调整配置类加载顺序 wiselyman spring 4
    4.1 @Order Spring 4.2 利用@Order控制配置类的加载顺序 4.2 演示 两个演示bean package com.wisely.spring4_2.order; public class Demo1Service { } package com.wisely.spring4_2.order; public class
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他