专栏首页java学习一个简单的Ajax功能(用到Jquery与Json)

一个简单的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 条评论
登录 后参与评论

相关文章

  • Java每日一练(2017/6/8)

    Java基础 | 数据库 | Android | 学习视频 | 学习资料下载 课前导读 ●回复"每日一练"获取以前的题目! ●答案公布时间:为每期发布题目的第二...

    Java学习
  • 各种学习资料集合大全!请大家惠存!

    Java学习
  • 基本数据类型转换之向上转型和向下转换

    最新通知 ●回复"每日一练"获取以前的题目! ●【新】Android视频更新了!(回复【安卓视频】获取下载链接) ●【新】Ajax知识点视频更新了!(回复【学习...

    Java学习
  • (附)python3 只需3小时带你轻松入门——python常用一般性术语或词语的简单解释

    公众号 碧油鸡
  • PAT (Basic Level) Practice (中文)1041 考试座位号

    每个 PAT 考生在参加考试时都会被分配两个座位号,一个是试机座位,一个是考试座位。正常情况下,考生在入场时先得到试机座位号码,入座进入试机状态后,系统会显示该...

    C you again 的博客
  • Apache 使用ssl模块配置HTTPS

    Web服务器在默认情况下使用HTTP,这是一个纯文本的协议。正如其名称所暗示的,纯文本协议不会对传输中的数据进行任何形式的加密。而基于HTTP的Web服务器是非...

    阳光岛主
  • 前端基础知识概述 -- 移动端开发的屏幕、图像、字体与布局的兼容适配

    前端的一大工作内容就是去兼容页面在不同内核的浏览器,不同的设备,不同的分辨率下的行为,使页面的能正常工作在各种各样的宿主环境当中。

    Sb_Coco
  • 2-4 R语言基础 列表

    > l1 <- list("a",2,10L,3+4i,TRUE) #每个元素没有名字 > l1 [[1]] [1] "a"

    hankleo
  • 各种排序算法的分析及java&python实现

    排序大的分类可以分为两种:内排序和外排序。在排序过程中,全部记录存放在内存,则称为内排序,如果排序过程中需要使用外存,则称为外排序。下面讲的排序都是属于内排序。...

    石晓文
  • 【原创】说好的暴雨呢,搁哪呢?还能不能 雨~露~均~沾?

    不是说下大雨吗?玩儿呐?搁哪呢?大雨搁哪呢?下丢啦?哗啦到海里去啦?让五娃给吞啦?南方整的那老大,看不起副中心咋的?还能不能 雨~露~均~沾~?你说我小...

    码神联盟

扫码关注云+社区

领取腾讯云代金券