一个简单的Ajax功能(用到Jquery与Json)

功能介绍:就是页面已加载完成就通过ajax异步访问服务器然后去局部刷新页面(也就是给从服务器获取的值存在页面的下拉框中显示如下图:)

效果图:

提示:上面的java学习和许肖飞不是写死的而是从服务器中获取的

1、在index.jsp页面载入jquery-1.8.3.js(放在WebRoot目录下的js文件夹里面)

并且在WebRoot下面的lib文件夹中导入

<scripttype="text/javascript"src="js/jquery-1.8.3.js"></script>

2、在index.jsp页面写入这句话

所有员工:<select id="empsel"></select>

效果图:

3、创建一个User对象

public class User {

private intuserid;

private String username;

public void setUserid(int userid) {

this.userid = userid;

}

public String getUsername() {

returnusername;

}

public void setUsername(String username) {

this.username = username;

}

}

4、创建一个UserServlet.java

importjava.io.IOException;

importjava.io.PrintWriter;

importjava.util.ArrayList;

importjava.util.List;

importjavax.servlet.ServletException;

importjavax.servlet.http.HttpServlet;

importjavax.servlet.http.HttpServletRequest;

importjavax.servlet.http.HttpServletResponse;

importcom.google.gson.Gson;

public class UserServlet extends HttpServlet{

@Override

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

req.setCharacterEncoding("UTF-8");//处理中文乱码

resp.setCharacterEncoding("UTF-8");//处理中文乱码

PrintWriter writer= resp.getWriter();

List<User> list= new ArrayList<User>();//声明一个list存放多个User对象

User user1=new User();//就是上面声明的User对象

user1.setUserid(1);

user1.setUsername("java学习");

User user2=new User();

user2.setUserid(2);

user2.setUsername("许肖飞");

list.add(user1);

list.add(user2);

Gson gson= new Gson();//这个需要导入第三方包(gson-2.2.2.jar)不然用不了

String str=gson.toJson(list);//把list对象转成json格式的一个字符串

writer.print(str);//把str返回给ajax的data变量中

}

@Override

protected voiddoPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {

doGet(req, resp);

}

}

5、在web.xml中声明UserServlet(不然用不了)

<?xml version="1.0"encoding="UTF-8"?>

<web-app version="2.5"

xmlns="http://java.sun.com/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">

<display-name></display-name>

<servlet>

<servlet-name>UserServlet</servlet-name>

<servlet-class>com.aaa.UserServlet </servlet-class>

</servlet>

<servlet-mapping>

<servlet-name>UserServlet</servlet-name>

<url-pattern>/UserServlet</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>index.jsp</welcome-file>

</welcome-file-list>

</web-app>

6、在index.jsp中写ajax结合jquery一起使用

<script type="text/javascript">

$(document).ready(function() {

$.get("UserServlet",function(data) {

$.each(data,function(i,user){

$("#empsel").append(" <option value='"+user.userid+"'>"+user.username+"</option>");

});

},"json");

});

</script>


注意:另外多声明一个<script type="text/javascript"></script>写上面的代码,不要在<scripttype="text/javascript"src="js/jquery-1.8.3.js"></script>里面写

  • $(document).ready(function() {});页面一加载完就会执行function() {}里面的函数
  • $.get("LoginServlet",function(data) {},"json");访问UserServlet(web.xml中UserServlet声明的路径) data是接收访问LoginServlet响应回来的json格式的字符串str的值(参考第四步writer.print(str)的值)

6、部署项目!访问index.jsp页面得到下面的效果:

本文分享自微信公众号 - java学习(javaxxf)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-09-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HansBug's Lab

【作业】HansBug的前三次OO作业分析与小结

OO课程目前已经进行了三次的作业,容我在本文中做一点微小的工作。 第一次作业 第一次作业由于难度不大,所以笔者程序实际上写的也比较随意一些。(点击就送指导书~)...

36960
来自专栏HansBug's Lab

【备忘】Idea的那些事

说到Java的IDE,似乎eclipse和Idea是目前的主流。然而,OO的课程组却一直在推荐使用eclipse,于是很多人就这样错过了Idea这样强大的IDE...

45490
来自专栏知识分享

JDBC基本知识

JDBC的作用 JDBC为java访问数据库提供通用的API,可以为多种关系数据库提供统一访问。因为SQL是关系式数据库管理系统的标准语言,只要我们遵循SQL规...

377110
来自专栏逸鹏说道

ASP.NET Core 性能对比评测(ASP.NET,Python,Java,NodeJS)

前言 性能是我们日常生活中经常接触到的一个词语,更好的性能意味着能给我们带来更好的用户体检。比如我们在购买手机、显卡、CPU等的时候,可能会更加的关注于这样指标...

2K60
来自专栏Java 源码分析

JDBC

1.普通的 JDBC 链接 public class JdbcConnect { @Test public void connect() thro...

37360
来自专栏技术碎碎念

Jsp语法、指令及动作元素

一、JSP的语法 1、JSP的模板元素:(先写HTML)    就是JSP中的那些HTML标记    作用:页面布局和美化 2、JSP的Java脚本表达式:  ...

48660
来自专栏技术碎碎念

EL函数以及自定义标签的应用

一、EL函数(调用普通类的静态方法) 编写步骤(自定义EL函数的编写步骤即自定义标签的编写步骤): ①编写一个普通的java类,提供一个静态方法,功能自定...

42680
来自专栏技术碎碎念

python3 入门 (四) 类与继承

Python 类 Python中的类提供了面向对象编程的所有基本功能:类的继承机制允许多个基类,派生类可以覆盖基类中的任何方法,方法中可以调用基类中的同名方法。...

448120
来自专栏技术碎碎念

数据的分页处理

当页面中要显示的内容过多需要分多页显示、或是数据量过大内存吃不消时,需要分页处理。 原理:每次从数据库中取出一定量的数据,通过jsp页面显示 实现: ①写一个类...

32550
来自专栏c#开发者

建立JDBC数据库连接实例解析

  连接(Connection)是一个代表与数据库进行的程序连接的对象。通过连接,可以执行SQL语句、返回数据库操作结果等。 创建指定数据库的URL    ...

37480

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励