精华内容
下载资源
问答
  • jquery ajax 后台获取数据到界面

    千次阅读 2016-08-08 10:59:59
    jquery ajax 后台获取数据到界面 jquery ajax从后台获取  把需要传的元素按照格式什么,如下例子中的yesNum,noNum,然后通过response.getWriter().write()传值到前端  StringBuffer xmlResult = ...

    jquery ajax 从后台获取数据到界面

    jquery ajax从后台获取

     从把需要传的元素按照格式什么,如下例子中的yesNum,noNum,然后通过response.getWriter().write()传值到前端

      StringBuffer xmlResult = newStringBuffer();
      xmlResult.append("<root>");
      xmlResult.append("<yesNum>"+yesNum + "</yesNum>");
      xmlResult.append("<noNum>"+ noNum + "</noNum>");
      xmlResult.append("</root>");
      
      response.getWriter().write(xmlResult.toString());

    js中申明 $.ajax在后面url中输入请求路径。在success红的data为反调函数中获取的返回的data对象

    通过each遍历xml并通过$(this).children("yesNum").text();  获取到返回的值    
    var a,b;

    $.ajax({
        async :false,

        cache: false,     type:'POST',     dataType: "xml",
        url:"ac14Action.do?method=getStauts",//请求的action路径
        error:function () {//请求失败处理函数
         alert('请求失败');
        },
        success:function(data){ //请求成功后处理函数。
         $(data).find("root").each(function(){                           
                 varprovinceId=$(this).children("yesNum").text();      
                 var provinceName=$(this).children("noNum").text();
                 a=provinceId;
                 b=provinceName;
                 a=parseInt(a);
                 b=parseInt(b);
                 });
           
        }
      });

     

    urlString(默认: 当前页地址) 发送请求的地址。
    typeString(默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为"GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
    timeoutNumber设置请求超时时间(毫秒)。此设置将覆盖全局设置。
    asyncBoolean(默认: true)默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
    beforeSendFunction发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义HTTP 头。XMLHttpRequest 对象是唯一的参数。
    function (XMLHttpRequest) {
    
             this; // the options for this ajax request
             }
    
    cacheBoolean(默认: true) jQuery 1.2 新功能,设置为 false将不会从浏览器缓存中加载请求信息。
    completeFunction请求完成后回调函数 (请求成功或失败时均调用)。参数:XMLHttpRequest 对象,成功信息字符串。
    function (XMLHttpRequest, textStatus) {
    
             this; // the options for this ajax request
             }
    
    contentTypeString(默认:"application/x-www-form-urlencoded")发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
    dataObject,
    String
    发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为'&foo=bar1&foo=bar2'。
    dataTypeString

    预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或responseText,并作为回调函数参数传递,可用值:

    "xml": 返回 XML 文档,可用 jQuery 处理。

    "html": 返回纯文本 HTML 信息;包含 script 元素。

    "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。

    "json": 返回 JSON 数据 。

    "jsonp": JSONP格式。使用 JSONP形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

    errorFunction(默认: 自动判断 (xml 或 html))请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。
    function (XMLHttpRequest, textStatus, errorThrown) {
    
             // 通常情况下textStatus和errorThown只有其中一个有值 
             this; // the options for this ajax request
             }
    
    globalBoolean(默认: true) 是否触发全局 AJAX 事件。设置为 false将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
    ifModifiedBoolean(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包Last-Modified 头信息判断。
    processDataBoolean(默认: true)默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为false。
    successFunction请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态
    function (data, textStatus) {
    
             // data could be xmlDoc, jsonObj, html, text, etc...
             this; // the options for this ajax request
             }
    
    展开全文
  • Spring Boot使用AJAX从数据库读取数据异步刷新前端表格 1.首先在domin中定义相应的数据结构 2.接着在mapper中定义定义所需的方法数据库中取数据 3.下一步编写service供controller调用 4.在controller中调用...

    目录

    Spring Boot使用AJAX从数据库读取数据异步刷新前端表格

    1.首先在domin中定义相应的数据结构

    2.接着在mapper中定义定义所需的方法从数据库中取数据

    3.下一步编写service供controller调用

    4.在controller中调用service并按规定路径返回给前台所需的数据

    5.在JS中处理数据并刷新前端显示:

    6.前端HTML页面table代码:

    7.最后,在button中调用此刷新方法:

    ***整个数据读取的核心***


    Spring Boot使用AJAX从数据库读取数据异步刷新前端表格

      近期项目需要是实现一个通过筛选选取所需数据刷新表格的功能,因为表格只占页面的一小部分,不希望整个也页面都随之刷新,所以首先想到了使用AJAX来实现。

      筛选前先随便给table添加一些数据:

     

    1.首先在domin中定义相应的数据结构

    这里使用之前已经定义好的一个类,里面包含了我们所需的几个属性,所以就直接抱过来

     1 public class JichutongjiTable {
     2     private int kaoshirenshu;
     3     private int yingdaorenshu;
     4     private double pingjunfen;
     5     private double fangcha;
     6     private int zhishidian;
     7     private int zuigaofen;
     8     private int zuidifen;
     9 
    10     public int getZuigaofen() {
    11         return zuigaofen;
    12     }
    13 
    14     public void setZuigaofen(int zuigaofen) {
    15         this.zuigaofen = zuigaofen;
    16     }
    17 
    18     public int getZuidifen() {
    19         return zuidifen;
    20     }
    21 
    22     public void setZuidifen(int zuidifen) {
    23         this.zuidifen = zuidifen;
    24     }
    25 
    26     public int getKaoshirenshu() {
    27         return kaoshirenshu;
    28     }
    29 
    30     public void setKaoshirenshu(int kaoshirenshu) {
    31         this.kaoshirenshu = kaoshirenshu;
    32     }
    33 
    34     public int getYingdaorenshu() {
    35         return yingdaorenshu;
    36     }
    37 
    38     public void setYingdaorenshu(int yingdaorenshu) {
    39         this.yingdaorenshu = yingdaorenshu;
    40     }
    41 
    42     public double getPingjunfen() {
    43         return pingjunfen;
    44     }
    45 
    46     public void setPingjunfen(double pingjunfen) {
    47         this.pingjunfen = pingjunfen;
    48     }
    49 
    50     public double getFangcha() {
    51         return fangcha;
    52     }
    53 
    54     public void setFangcha(double fangcha) {
    55         this.fangcha = fangcha;
    56     }
    57 
    58     public int getZhishidian() {
    59         return zhishidian;
    60     }
    61 
    62     public void setZhishidian(int zhishidian) {
    63         this.zhishidian = zhishidian;
    64     }
    65 }
     

    2.接着在mapper中定义定义所需的方法从数据库中取数据

    1 @Component
     2 public interface JichutongjiMapper {
     3     //获取基础信息
     4     @Select("SELECT COUNT(*) as kaoshirenshu FROM (SELECT * FROM fenshu GROUP BY xuehao HAVING SUM(xueshengdefen)<>0) as t1 UNION ALL SELECT COUNT(*) as yingdaorenshu FROM (SELECT * FROM fenshu GROUP BY xuehao) as t1 UNION ALL SELECT FLOOR(sum(a)/COUNT(a)) as pingjunfen FROM (SELECT sum(xueshengdefen) as a FROM fenshu GROUP BY xuehao) AS b UNION ALL SELECT variance(a) as fangcha FROM (SELECT sum(xueshengdefen) as a FROM fenshu GROUP BY xuehao) AS b")
     5     public List<Integer> getJichutongji();
     6     //获取最高分
     7     @Select("SELECT MAX(tt.chengji) AS zuigaofen FROM (SELECT SUM(xueshengdefen) AS chengji FROM fenshu GROUP BY xuehao) AS tt")
     8     public Integer getMaxMark();
     9     //获取最低分
    10     @Select("SELECT MIN(tt.chengji) AS zuidifen FROM (SELECT SUM(xueshengdefen) AS chengji FROM fenshu GROUP BY xuehao) AS tt")
    11     public Integer getMinMark();
    12 }
      

     

    3.下一步编写service供controller调用

    1 @Service
     2 public class JichuqingkuangService {
     3     @Autowired
     4     private JichutongjiMapper jichutongjiMapper;
     5     @Autowired
     6     private  ShitifenxiMapper shitifenxiMapper;
     7     public List<Integer> getJichutongji(){
     8         List<Integer> list= jichutongjiMapper.getJichutongji();
     9         return list;
    10     }
    11         public Integer getMaxMark(){
    12         return jichutongjiMapper.getMaxMark();
    13     }
    14     public Integer getMinMark(){
    15         return jichutongjiMapper.getMinMark();
    16     }
    17 }

     

    4.在controller中调用service并按规定路径返回给前台所需的数据

     1 @Controller
     2 public class IndexController {
     3 
     4     @Autowired
     5     private JichuqingkuangService jichuqingkuangService;
     6    @PostMapping(value="/easyuiIndexTable")
     7     @ResponseBody
     8     public Map<String,String> xiaoguoTable(){
     9 
    10         Map<String,String> map=new HashMap<>();
    11         List<Integer> list= jichuqingkuangService.getJichutongji();
    12         String highScore = ""+jichuqingkuangService.getMaxMark();
    13         String lowScore = ""+jichuqingkuangService.getMinMark();
    14 
    15         map.put("totalNumber",""+list.get(0));
    16         map.put("actualNumber",""+list.get(1));
    17         map.put("highScore",highScore);
    18         map.put("lowScore",lowScore);
    19         map.put("avgScore",""+list.get(2));
    20         map.put("variance",""+list.get(3));
    21 
    22 
    23         return map;
    24     }
    25 }
    26     

    5.在JS中处理数据并刷新前端显示:

    <script type="text/javascript">
    function refurbishIndex(){
    
        var optionJson=[];
        $.ajax({
            type:"post",
            url:"/easyuiIndexTable",
            data:{},
            async: false,
            success:function (data) {
                optionJson=data;
    
                var str="";
    
                str+="<tr>"+
                    "<td>"+optionJson.totalNumber+"</td>"+
                    "<td>"+optionJson.actualNumber+"</td>"+
                    "<td>"+optionJson.highScore+"</td>"+
                    "<td>"+optionJson.lowScore+"</td>"+
                    "<td>"+optionJson.avgScore+"</td>"+
                    "<td>"+optionJson.variance+"</td>"+
                    "</tr>";
    
                document.getElementById("tbodydata").innerHTML=str;
    
    
            }
        });
    }
    </script>

    6.前端HTML页面table代码:

     1 <table style="width:100%;height:190px">
     2     <tr>
     3         <td style="width:100%">
     4             <table>
     5                 <thead>
     6                 <tr class="cen">
     7                     <th>实际人数(单位:人)</th>
     8                     <th>应到人数(单位:人)</th>
     9                     <th>最高分(单位:分)</th>
    10                     <th>最低分(单位:分)</th>
    11                     <th>考试平均分(单位:分)</th>
    12                     <th>考试方差(单位:1)</th>
    13                 </tr>
    14                 </thead>
    15                 <tbody id="tbodydata">
    16                 <tr>
    17                     <td>1111</td>
    18                     <td>2222</td>
    19                     <td>3333</td>
    20                     <td>4444</td>
    21                     <td>5555</td>
    22                     <td>6666</td>
    23                 </tr>
    24 
    25                 </tbody>
    26             </table>
    27         </td>
    28     </tr>
    29 
    30 </table>

    7.最后,在button中调用此刷新方法:

    <button onclick="refurbishIndex()">筛选</button>

     

    至此,便完成了数据读取,传递,刷新的整个流程,点击筛选按钮后,table表格内的数据实现刷新

    ***整个数据读取的核心***

    1、后台将数据List<Map> dataList放在request中,request.setAttribute('dataList',dataList);
    2、jsp页面通过el表达式获取$(dataList);
    3、通过jstl的c:forEach命令遍历dataList
    4、获取到dataList中的每一个map元素后,再用c:forEach命令遍历map,取出对应map的key与value。

    展开全文
  • Ajax初试之读取数据

    2020-10-28 23:04:38
    上次我们讲了"ajax开始准备篇",做好了基本的ajax准备工作以后.我们开始牛刀小试一下:ajax初试之读取数据篇.是的,今天我们要实现的效果是.在不刷新网页的情况下读取并显示服务端的数据
  • ajax从接口获取数据

    千次阅读 2019-01-19 20:34:40
    现在大部分都是前后端分离的项目,需要我们通过接口获取数据,其实和传统的差不多,没必要把调接口数据想象的那么难和高大上(#^.^#) 仅举例说明 写一个getUser.json { "code":1, "msg":&...

    现在大部分都是前后端分离的项目,需要我们通过接口获取数据,其实和传统的差不多,没必要把调接口数据想象的那么难和高大上(#^.^#)

    仅举例说明

    写一个getUser.json

    {
    	"code":1,
    	"msg":"获取成功",
    	"data":{
    		"id":1,
    		"uid":358,
    		"name":"hhh",
    		"sex":"男",
    		"img":"1000",
    		"number":1003,
    		"allow_number":1
    	}
    }

    用ajax调用这个数据

        var RUL_list = 'http://你的路径/getUser';
    	$.ajax({
    		type:'post',
            url: RUL_list,
            data:{'access_token':token,'aid':2},
            dataType : 'json',
            async : true, //默认为true 异步
            success:function(data){
                console.log(data.data);
                if(data.code == '1'){
    //              $.each(data.data,function(key,arr){ 
    		            var str ="<div id='xx'>"
    					  + "<div class='name'>"+data.data.id+"号:"+data.data.name+" ("+data.data.sex+")</div>"
    					  + "<div class='n-father'>"
    					  + "<div class='n-left'>当前排名:<br /><span >"+data.data.paiming+"</span></div>"
    					  + "</div>";
    				
    		            $("#content").prepend(str);
    		           
    //		          });
                }else if(data.code == '4' ){
                	 
                	   $("#content").html("你没权限!");
                	
                }
            },
            error:function(data){
    //          alert(data.code);
    			
            }
        });
        

    相应的页面

    <div id=content></div>

     

    展开全文
  • AJAX从服务端获取数据的三种方法 1.服务端获得XML格式的数据 2.直接获得<option>...内容的字符串 3.服务端返回javascript代码,在客户端使用eval函数执行
  • 上次我们讲了ajax开始准备篇,做好了基本的ajax准备工作以后.我们开始牛刀小试一下:ajax初试之读取数据篇.
  • Ajax异步读取数据

    2008-09-13 20:33:31
    使用Ajax提交数据更新服务器内容 异步获取天气预报数据的实例 使用Ajax读取XML类型数据 使用Ajax返回字符串数据
  • Angular 中使用AJAX从后台获取数据

    千次阅读 2018-07-23 16:39:14
    //打印后台接收的数据 $scope.user = data;//将数据赋值给angular模型变量 }); } }); 3. 在HTML页面中的 按钮中使用angular的点击事件:ng-click,代码如下: ()">登录 4. 记得HTML文件的HTML标签...

    这里要吐槽下了,WS的JSP页面中没有angular的智能提示?

    好了,下面开始正文。

    1. HTML中引用angular.js  -  这好像是废话了。

    2. 下面先介绍JS代码:

    
    // 登录验证
    angular.module("mainModule",['ng']).controller("mainController",function($scope,$http){
        $scope.user = null;
    
        // 登录验证
        $scope.loginValidate = function(){
            console.log("进入AJAX的点击事件内");
    
            $http({method:'GET',url:'/femis/getUserBySid?sId=' + $scope.user.sId})
                .success(function(data){
                    console.log(data);//打印从后台接收的数据
                    $scope.user = data;//将数据赋值给angular模型变量
                });
        }
    
    });

    3. 在HTML页面中的 按钮中使用angular的点击事件:ng-click,代码如下:

    <button ng-click="loginValidate()">登录</button>

    4. 记得HTML文件的HTML标签中声明ng-app,以及在body标签中声明ng-controller

    展开全文
  • ajax实现自动读取数据

    2009-04-02 22:46:38
    ajax实现自动读取数据库数据,而且是在定时读取,你可是自己设置
  • ajax+jquery获取数据.doc

    2012-03-22 11:16:41
    ajax+jquery获取数据.doc
  • 我的思路就是一级那里搞个select,然后利用ajax返回action。然后利用ajax那里不懂。哪位大神教我怎么做? 1、这是select, function select(){ var xitong=document.getElementById("xitong").value; $.ajax...
  • 主要介绍了jQuery基于Ajax实现读取XML数据功能,结合实例形式分析了jQuery基于ajax的get方式获取xml文件数据并输出显示相关操作技巧,需要的朋友可以参考下
  • 主要介绍了JS使用ajax从xml文件动态获取数据显示的方法,实例分析了javascript使用Ajax技术操作XML文件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • ajax跨域获取数据

    2014-08-16 10:47:00
    你需要获取其他网站的数据吧,ajax跨域获取数据帮你实现。
  • Ajax 动态读取大量数据,基于prototype的rico 组件
  • 动态ajax从数据库取数据建立菜单动态ajax从数据库取数据建立菜单动态ajax从数据库取数据建立菜单动态ajax从数据库取数据建立菜单
  • 主要介绍了ajax与json 获取数据并在前台使用简单实例的相关资料,需要的朋友可以参考下
  • Ajax获取数据

    2019-02-27 20:35:43
    1 首先引入Ajax的封装包(ajax.js需要自己写) &lt;script type="text/javascript" src="Ajax.js"&gt;&lt;/script&gt; /** * Ajax 封装包 * Created by LL on 2019-02-27....
  • Ajax实现下拉列表数据库读取数据级联
  • 主要介绍了PHP+ajax实现获取新闻数据,涉及php ajax交互获取信息及json格式处理的相关操作技巧,需要的朋友可以参考下
  • 主要介绍了bootstrap select2 动态后台Ajax动态获取数据的代码,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 使用ajax从服务器端获取数据

    千次阅读 2016-11-11 19:00:38
    使用ajax从服务器端获取数据的步骤:  代码表示: var xhr = new XMLHttpRequest(); xhr.open("GET","ajax.do",true); xhr.onreadystatechange= function(){ if(xhr.readyState==4&&xhr....
  • ajax实现异步获取数据代码,非常不错,大家可以参考下,这个是应用于用户名的实时监测。
  • 通过Ajax从数据库中获取数据

    万次阅读 2018-05-29 09:37:03
    后台:Test01.ashx.cs:数据库获取数据,通过HTTP请求(HttpContext)实现和前台数据传递json数据using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data....
  • javascript 获取多条数据(模拟ajax获取数据),这样的好处不用额外的ajax读取链接,减轻服务器负担。
  • 适合前端初学者 jquery中的datatable使用ajax读取数据 并展示表格数据
  • ajax异步获取数据

    2012-06-13 08:44:18
    异步获取数据到页面,显示数据,感觉挺实用的,通过jqery的ajax获取,很方便!
  • 主要介绍了基于iframe实现ajax跨域请求,并获取网页中ajax数据,如何利用网页ajax请求暴露出来的接口去抓取网页数据?需要的朋友可以参考下
  • Ajax动态获取数据 ECHARTS图表

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 282,109
精华内容 112,843
关键字:

ajax从网上读取数据