Ajax异步加载

         //第一步 使用@Expose查找
         //实体类的属性名不一定与数据库列名相同,但是类型一定要匹配
    //当使用gson进行生产json字符串时,可以通过判断是否有该注解生成字  符串内容
    //如由注解就添加到字符串中,没有的就不添加到json字符串中
    //说明:需要使用如下方式实例化gson对象:new GsonBuilder().excludeFieldsWithoutExposeAnnotation().create();
    @Expose
    private int id;
    @Expose
    private String cname;

       //使用集合保存多条商品信息--list
    private  List<Goods> goods;

//第二步 编写一个Action
@RequestMapping("/listcategory")
    public void listCategoryForAjax(HttpServletResponse response) throws IOException {

        List<Category> list = categoryService.findAll();
        // 通过Expose注解排除某些字段信息,即有些数据不添加到Json字符串中
        String s = new GsonBuilder().excludeFieldsWithoutExposeAnnotation().create().toJson(list);

        logger.info(list.size() + " :::::::::  " + s);

        // 把数据返回给浏览器--返回给jquery ui
        response.setContentType("text/html; charset=UTF-8");
        response.getWriter().write(s);
        response.getWriter().flush();
    }

//第三步 添加标签
<select id="category" name="category" class="easyui-combobox" data-options="valueField:‘id‘, textField:‘cname‘, panelHeight:‘auto‘, width:‘80‘">

//第四步 编写javaScript代码

var url;
//打开新增窗口
function newGoods(){
    $(‘#dlg‘).dialog(‘open‘).dialog(‘setTitle‘,‘新增商品‘);
    //$(‘#fm‘).form(‘clear‘);
    $(‘#fm‘).form(‘reset‘);
    url = ‘goods/saveGoodsForAjax.do‘;

    //打开新增窗口,加载分类信息
    loadCategory();

}

function loadCategory(){    

    var dat = $(‘#dg‘).datagrid(‘getSelected‘);
     $.ajax({url:"goods/listcategory.do",dataType:‘json‘,type:‘post‘,success:function(data){

        //把查询的数据填充到下拉列表中
        $("#category").combobox("loadData", data);
        //修改选择的项
        if(dat){
            //修改要反选默认值--根据value进行选择
          $(‘#category‘).combobox(‘select‘, dat.category);
        }else{
            //新增取第一个为默认值--根据value进行选择
             $(‘#category‘).combobox(‘select‘, data[0].id);
        }
    }});
}
时间: 2024-10-05 17:09:28

Ajax异步加载的相关文章

jQuery的AJax异步加载片段

主要用到load()方法以及getScript()方法,具体以一个例子说明: 在现有html文件中加载一个拟好的片段,以及在片段加载完成之前阻止用户进一步操作的弹出框. 首先是现有html代码,无任何内容: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>AJax异步加载</title> <scri

淘宝购物车页面 智能搜索框Ajax异步加载数据

如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区非常的活跃,许多朋友都在不同地方分享了很多优秀的插件.我在相关的网站上找过想实现类似功能的插件,但是没有找到.于是乎,自己动手丰衣足食.自己来搭建智能搜索框下拉列表.当然,如果有类似功能并且常维护Bug的插件,望留言交流. 源码地址: 淘宝购物车页面--PC端和移动端项目实战 首先需要先给大家打一根

ajax异步加载问题

使用ajax异步加载数据,在之后需要用到这个数据时,应该将之后的js一并写入ajax函数中,否则后面的js不能找到动态拼接的dom节点. 或者将其封装成方法,在ajax动态加载数据的最后调用该方法.

Ajax异步加载数据及Redis缓存

针对网页分类条目的动态加载,图为页面的Head部分. //categoryListServlet准备分类数据 ProductService service = new ProductService(); List<Category> categoryList = service.findAllCategoryList(); response.setContentType("text/html; charset=utf-8"); Gson gson = new Gson();

使用ajax异步加载数据

使用ajax异步加载数据 controller为User赋值 @RequestMapping("/a2") public List<User> a2() { List<User> userlist = new ArrayList<User>(); userlist.add(new User("大头儿子", 6, "男")); userlist.add(new User("小头爸爸", 30,

Ajax 异步加载

AJAX (Asynchronous JavaScript and XML,异步的 JavaScript 和 XML).它不是新的编程语言,而是一种使用现有标准的新方法,是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的艺术. 那么,让我们一起走进AJax的世界吧. 基础语法 获取Ajax对象 设置回调函数 readystate status 开启交互 客户端更新页面 实例体验 使用Servlet方式 AjaxServletjava webxml ajaxhtml 实验结果 使用JS

使用Ajax异步加载页面时,怎样调试该页面的Js

前言-本人不是干前端的,所以有的名词不专业 在前端中,有时候会遇到这样的框架,http://172.17.11.151:8060/frontend/backend.html#1.html (通过解析URL,把1.html异步加载到指定位置),不知道这样的框架叫什么名字. 那我们就会遇到一个问题,调试1.html的时候怎么办,通过浏览器掉出控制台找不到1.Html页面,无法加断点啊. 解决办法 在1.html 你所要调试位置加上一句代码  debugger;  就可以了,就是这么爽 可以调试了,可

今日头条图片ajax异步加载爬取,并保存至mongodb,以及代码写法的改进

import requests,time,re,json,pymongofrom urllib.parse import urlencodefrom requests.exceptions import RequestExceptionfrom bs4 import BeautifulSoup as bs #连接mongodbclient = pymongo.MongoClient(host='localhost',port=27017)#指定数据库名称db = client.toutiao #

Ajax 异步加载机制基础

一.认识Ajax Ajax  一种JavaScript  and XML 快速创建动态网页的技术,通过客户端与后台进行通信,与后台服务器进行少量的数据交互.ajax 实现页面的异步更新,即是说不需要重新加载页面就可以对页面的部分数据进行及时更新.Ajax的主要方式是XMLHttpRequest对象. 二.Ajax的使用 (1)xhr创建 由于ajax是基于XMLHttpRequest对象实现的,所以要创建XMLHttpRequest对象实例,用于和后台服务器交换数据.当然,jQuery已经将此对