热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

使用jQuery实现简单ajax的演示代码

一、引言项目经理分配给一个活,用ajax来实现一个功能。原来没有接触过ajax,只知道jquery提供了ajax的接口,而我对jquery还算比较熟悉,所以现在就想学一下用jquery来实现ajax的功能。二、功能概述ajax主要的功能就是“不刷新页面改变页面内容”,或者就

一、引言

   项目经理分配给一个活,用ajax来实现一个功能。原来没有接触过ajax,只知道jquery提供了ajax的接口,而我对jquery还算比较熟悉,所以现在就想学一下用jquery来实现ajax的功能。

二、功能概述

   ajax主要的功能就是“不刷新页面改变页面内容”,或者就是“动态刷新页面”,反正我觉得就应该是胖客户端之类的概念吧。反正现在的技术就是要让IE功能越来越丰富,而且减少让用户等待刷新页面的机会,包括现在的actionScript都是这样的概念吧。反正这是我自己的理解。

   我要实现的功能很简单,就是有一个下拉列表,列表中有三种图书的种类,选择一条,就可以显示该类图书的详细信息,而不需要刷新页面或者转换页面。

三、开始例子

  1.数据库表结构(mysql数据库)

     1)建表语句:

 CREATE 

        TABLE catlog 

        ( 

            catlogid int(11) NOT NULL AUTO_INCREMENT, 

            catlogname varchar(20) NOT NULL, 

            mainBook text, 

            supplyCompany text, 

            amount int(11), 

            PRIMARY KEY USING BTREE (catlogid) 

        ) 

            ENGINE= InnoDB DEFAULT CHARSET= utf8

     2)表中数据为:

        1 computer 操作系统、java开发、数据库技术 北京图书印刷公司 100
        2 ecnomic 宏观经济、微观经济、市场营销 人民邮电出版社 200
        3    life 浮沉 新华书店 300

  2.jsp页面为:

<%@ page language="java" cOntentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@  taglib prefix="ww"  uri="/webwork" %>

<% String webapp=request.getContextPath(); %>

   

    /etc/css/common.css" rel="stylesheet" type="text/css">

    

    

   

     

       

             

               

                   

                      请选择图书种类:

                       

                        

                         ${catlogname} 

                        

                      

                      

                   

               

              

                

                

                

              

主要图书:
主要供应商:
本书店拥有该图书数量:

            

       

   

3.action代码

    public String getCatalogInfo(){

        catalog=ICatalogService.getCatlogByName(catalogName);

        JSONObject json= new JSONObject();

        try {

            json.put("mainBook",catalog.getMainBook());

            json.put("supplyCompany", catalog.getSupplyCompany());

            json.put("amount", catalog.getAmount());

        } catch (JSONException e) {

            e.printStackTrace();

            return ERROR;

        }

        catalogName = json.toString();

        return SUCCESS;

    }

4.service层代码:

    public Catlog getCatlogByName(String name) {

       return ICatalogDAO.getCatlog(name);

    }

5.pojo

package cn.resoft.cm.vo;

import java.util.HashSet;

import java.util.Set;

public class Catlog implements java.io.Serializable {

    private Integer catlogid;

    private String catlogname;

    private String mainBook;

    private String supplyCompany;

    private Integer amount;

    private Set books = new HashSet(0);

    public Catlog() {

    }

    public Catlog(String catlogname) {

        this.catlogname = catlogname;

    }

    public Catlog(String catlogname, Set books) {

        this.catlogname = catlogname;

        this.books = books;

    }

    public Integer getCatlogid() {

        return this.catlogid;

    }

    public void setCatlogid(Integer catlogid) {

        this.catlogid = catlogid;

    }

    public String getCatlogname() {

        return this.catlogname;

    }

    public void setCatlogname(String catlogname) {

        this.catlogname = catlogname;

    }

    public Set getBooks() {

        return this.books;

    }

    public void setBooks(Set books) {

        this.books = books;

    }

    public String getMainBook() {

        return mainBook;

    }

    public void setMainBook(String mainBook) {

        this.mainBook = mainBook;

    }

    public String getSupplyCompany() {

        return supplyCompany;

    }

    public void setSupplyCompany(String supplyCompany) {

        this.supplyCompany = supplyCompany;

    }

    public Integer getAmount() {

        return amount;

    }

    public void setAmount(Integer amount) {

        this.amount = amount;

    }

}

好了,这个功能就实现了。


推荐阅读
  • 本文将详细介绍如何在ThinkPHP6框架中实现多数据库的部署,包括读写分离的策略,以及如何通过负载均衡和MySQL同步技术优化数据库性能。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • 前言--页数多了以后需要指定到某一页(只做了功能,样式没有细调)html ... [详细]
  • 深入解析ES6至ES8的新特性与应用
    本文详细介绍了自2015年发布的ECMAScript 6.0(简称ES6)以来,JavaScript语言的多项重要更新,旨在帮助开发者更好地理解和利用这些新特性进行复杂应用的开发。 ... [详细]
  • 本文详细记录了在基于Debian的Deepin 20操作系统上安装MySQL 5.7的具体步骤,包括软件包的选择、依赖项的处理及远程访问权限的配置。 ... [详细]
  • 本文详细介绍了中央电视台电影频道的节目预告,并通过专业工具分析了其加载方式,确保用户能够获取最准确的电视节目信息。 ... [详细]
  • 探讨在循环中调用$.post()时,回调函数为何会在循环结束后才开始执行,并提供解决方案和优化建议。 ... [详细]
  • 本文详细解析了如何使用Python的urllib模块发起POST请求,并通过实例展示如何爬取百度翻译的翻译结果。 ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
  • 在PHP后端开发中遇到一个难题:通过第三方类文件发送短信功能返回的JSON字符串无法解析。本文将探讨可能的原因并提供解决方案。 ... [详细]
  • 一个登陆界面
    预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]
  • 在Web开发过程中,Ajax技术常用于前后端数据交互。其中一个重要的属性async决定了请求是否以异步方式执行,本文将详细解析async属性的作用及使用方法。 ... [详细]
  • 本文深入探讨了JavaScript中实现继承的四种常见方法,包括原型链继承、构造函数继承、组合继承和寄生组合继承。对于正在学习或从事Web前端开发的技术人员来说,理解这些继承模式对于提高代码质量和维护性至关重要。 ... [详细]
  • 本文探讨了浏览器的同源策略限制及其对 AJAX 请求的影响,并详细介绍了如何在 Spring Boot 应用中优雅地处理跨域请求,特别是当请求包含自定义 Headers 时的解决方案。 ... [详细]
  • 深入分析十大PHP开发框架
    随着PHP技术的发展,各类开发框架层出不穷,成为了开发者们热议的话题。本文将详细介绍并对比十款主流的PHP开发框架,旨在帮助开发者根据自身需求选择最合适的工具。 ... [详细]
author-avatar
he小任a
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有